将现有ASP.NET Core 16+Angular14项目转为集成Angular Universal14的项目

1. Program.cs中SPA中间件的正确配置 #

确保API路由优先于SPA中间件处理，避免API请求被SPA拦截，以下是完整配置示例：

var builder = WebApplication.CreateBuilder(args);

// 注册API服务
builder.Services.AddControllers();
// 配置SPA静态文件支持，指向Angular编译输出目录
builder.Services.AddSpaStaticFiles(config =>
{
    config.RootPath = "ClientApp/dist";
});

var app = builder.Build();

// 环境配置
if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}
else
{
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseRouting();
app.UseAuthorization();
// 先映射API路由
app.MapControllers();

// 启用SPA静态文件服务
app.UseSpaStaticFiles();

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp"; // Angular项目根目录

    if (app.Environment.IsDevelopment())
    {
        // 开发环境调用Angular CLI的SSR启动脚本
        spa.UseAngularCliServer(npmScript: "start:ssr");
    }
    else
    {
        // 生产环境直接使用编译后的SSR资源
        spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
        {
            OnPrepareResponse = ctx =>
            {
                ctx.Context.Response.Headers.Append("Cache-Control", "no-cache, no-store, must-revalidate");
            }
        };
    }
});

app.Run();

注意：npmScript参数要与Angular项目package.json中的SSR启动脚本名称一致（通常为start:ssr）。

2. 通过ASP.NET Core运行Angular Universal的步骤 #

1. 在Angular项目中添加Universal支持
   进入Angular项目根目录（通常是ClientApp），执行命令：

ng add @nguniversal/express-engine@14

该命令会自动生成SSR相关文件，并在package.json中添加start:ssr、build:ssr等脚本。

2. 配置ASP.NET Core项目构建参数
   在项目的.csproj文件的PropertyGroup节点中添加：

<BuildServerSideRenderer>true</BuildServerSideRenderer>

此配置会让ASP.NET Core在构建时自动编译Angular的SSR代码。

3. 运行项目

• 开发环境：直接启动ASP.NET Core项目，会自动调用Angular CLI启动SSR服务器。
• 生产环境：先执行Angular的SSR构建命令npm run build:ssr，再构建并启动ASP.NET Core项目。

3. API集成与CORS问题解决 #

API集成方式 #

Angular Universal在服务器端渲染时，API请求是从ASP.NET Core服务器内部发起，无需跨域；客户端渲染时，使用相对路径请求API即可避免跨域：
在Angular的environment.ts中配置API基础路径：

export const environment = {
  production: false,
  apiUrl: '/api' // 相对路径，自动指向当前域名的API路由
};

这样不管是SSR还是客户端渲染，都会请求同一域名下的API，无需跨域配置。

CORS错误解决 #

如果必须使用跨域API，在ASP.NET Core中配置CORS策略：

// 注册CORS服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowSpecificOrigin", policy =>
    {
        // 生产环境替换为实际的Angular域名
        policy.WithOrigins("http://localhost:4200")
              .AllowAnyMethod()
              .AllowAnyHeader();
    });
});

// 在路由之后、授权之前启用CORS
app.UseCors("AllowSpecificOrigin");

注意：开发环境可临时使用AllowAnyOrigin()，但生产环境必须指定具体域名，避免安全风险。

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