VS2022的.NET 6 Angular项目安装Angular Universal缺失核心文件

核心原因 #

VS2022默认生成的.NET 6 Angular项目采用Angular嵌入.NET项目的特殊结构（Angular代码位于ClientApp目录），与纯Angular项目结构差异导致ng add @nguniversal/express-engine命令无法自动完成全量初始化，仅安装了依赖包但未生成SSR核心文件。

分步解决方案 #

1. 确认版本兼容性 #

首先检查项目中Angular核心包（@angular/core、@angular/cli等）的版本，确保与@nguniversal/express-engine版本大版本一致（例如Angular 16对应Universal 16.x.x）。

• 查看版本：在ClientApp/package.json中查看dependencies下的Angular包版本
• 若版本不匹配，先卸载现有包：

  cd ClientApp
  npm uninstall @nguniversal/express-engine
  

• 安装对应版本：

  npm install @nguniversal/express-engine@<对应版本号>
  

2. 手动初始化Angular Universal #

进入ClientApp目录，执行Angular CLI的Universal生成命令：

cd ClientApp
ng generate universal --client-project <你的Angular项目名称>

注：<你的Angular项目名称>可在ClientApp/angular.json的projects节点中找到，默认可能为ClientApp或webapp。

若上述命令仍报错，可手动创建以下核心文件：

main.server.ts

import { enableProdMode } from '@angular/core';
import { environment } from './src/environments/environment';
import { AppServerModule } from './src/app/app.server.module';

if (environment.production) {
  enableProdMode();
}

export { AppServerModule } from './src/app/app.server.module';
export { renderModule, renderModuleFactory } from '@angular/platform-server';

tsconfig.server.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./dist/out-tsc/server",
    "target": "es2020",
    "types": [
      "node"
    ]
  },
  "files": [
    "src/main.server.ts",
    "server.ts"
  ],
  "angularCompilerOptions": {
    "entryModule": "./src/app/app.server.module#AppServerModule"
  }
}

app.server.module.ts

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

server.ts

import 'zone.js/node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/app/app.server.module';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';

const app = express();
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/ClientApp');

const indexHtml = existsSync(join(DIST_FOLDER, 'browser', 'index.html')) ? 'index.html' : 'index';

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
}));

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

app.get('*.*', express.static(join(DIST_FOLDER, 'browser'), {
  maxAge: '1y'
}));

app.get('*', (req, res) => {
  res.render(indexHtml, {
    req,
    providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }]
  });
});

app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

3. 调整.NET项目配置 #

修改项目根目录下的Program.cs，将SPA中间件配置改为支持SSR：

var builder = WebApplication.CreateBuilder(args);

// 省略其他默认配置...

builder.Services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/dist/browser";
});

var app = builder.Build();

// 省略其他中间件配置...

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    if (app.Environment.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start:ssr");
    }
    else
    {
        spa.UseSpaPrerendering(options =>
        {
            options.BootModulePath = $"{spa.Options.SourcePath}/dist/server/main.js";
            options.BootModuleBuilder = app.Environment.IsDevelopment() 
                ? new AngularCliBuilder(npmScript: "build:ssr") 
                : null;
            options.ExcludeUrls = new[] { "/sockjs-node" };
        });
    }
});

app.Run();

4. 更新package.json脚本 #

在ClientApp/package.json的scripts中添加SSR相关命令：

"scripts": {
  // 保留原有脚本...
  "build:ssr": "ng build && ng run ClientApp:server",
  "start:ssr": "node dist/ClientApp/server/main.js"
}

内容的提问来源于stack exchange，提问作者NiteshLama