如何在同一域名下让Angular SPA与现有ASP.NET Core应用共存？

针对大型MVC应用逐步迁移到Angular的需求，以下是三种可落地的同域名共存方案，支持迭代迁移、测试与部署：

一、反向代理路由分流（推荐用于页面级迁移） #

通过ASP.NET Core内置的SPA中间件和路由规则，将不同路径的请求分流到MVC或Angular，实现无感知共存。

配置步骤： #

1. 在ASP.NET Core项目中添加SPA静态文件托管服务：

var builder = WebApplication.CreateBuilder(args);

// 保留原有MVC/Razor页面服务
builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

// 配置Angular打包产物的静态文件托管
builder.Services.AddSpaStaticFiles(config =>
{
    config.RootPath = "ClientApp/dist"; // 指向Angular项目打包后的输出目录
});

var app = builder.Build();

// 启用静态文件与SPA静态文件中间件
app.UseStaticFiles();
app.UseSpaStaticFiles();

// 配置原有MVC/Razor路由
app.UseRouting();
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");
app.MapRazorPages();

// 配置Angular专属路由前缀（比如/ng），匹配的请求转发到Angular
app.MapWhen(context => context.Request.Path.StartsWithSegments("/ng"), spa =>
{
    spa.UseSpa(spaBuilder =>
    {
        spaBuilder.Options.SourcePath = "ClientApp";
        // 开发环境直接启动Angular Dev Server，无需手动打包
        if (app.Environment.IsDevelopment())
        {
            spaBuilder.UseAngularCliServer(npmScript: "start");
        }
    });
});

app.Run();

适用场景： #

• 按页面维度逐步迁移，原有MVC页面保留路径，新开发/迁移的页面放在/ng前缀下
• 开发环境自动代理Angular热更新请求，生产环境直接托管打包后的静态文件

二、Razor页面嵌入Angular独立组件（推荐用于组件级迁移） #

将Angular组件编译为Web Component（自定义元素），直接嵌入到现有Razor页面中，实现局部替换。

配置步骤： #

1. 在Angular项目中标记组件为独立组件并配置编译为自定义元素：
   修改angular.json的build配置：

"projects": {
  "your-angular-app": {
    "architect": {
      "build": {
        "options": {
          "outputPath": "dist",
          "customElements": ["user-profile", "data-table"], // 指定要编译为自定义元素的组件
          "tsConfig": "tsconfig.app.json"
        }
      }
    }
  }
}

2. 打包Angular组件，将生成的main.js等文件复制到MVC项目的wwwroot/angular-components目录

3. 在Razor页面中引入脚本并使用自定义元素：

@{
    ViewData["Title"] = "User Dashboard";
}

<div class="container">
    <h2>用户控制面板</h2>
    <!-- 原有MVC渲染的内容 -->
    <p>欢迎回来，@User.Identity.Name</p>
    <!-- 嵌入Angular自定义组件 -->
    <user-profile api-url="@Url.Action("GetUserProfile", "Api")"></user-profile>
    <data-table data-url="@Url.Action("GetTableData", "Api")"></data-table>
</div>

<script src="~/angular-components/main.js"></script>

适用场景： #

• 逐个替换页面中的业务组件（比如表格、表单），无需重构整个页面
• 组件验证通过后，再逐步扩大嵌入范围

三、路由前缀完全隔离（适合全量迁移过渡） #

将MVC和Angular的路由用明确前缀彻底隔离，比如MVC路径统一为/mvc/*，Angular接管根路径/*，逐步迁移后移除MVC前缀。

配置步骤： #

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();
builder.Services.AddSpaStaticFiles(config =>
{
    config.RootPath = "ClientApp/dist";
});

var app = builder.Build();

app.UseStaticFiles();
app.UseSpaStaticFiles();

// 先配置Angular SPA路由，接管根路径请求
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
    spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
    {
        OnPrepareResponse = ctx =>
        {
            // 排除MVC前缀的请求，让其走MVC路由
            if (ctx.Context.Request.Path.StartsWithSegments("/mvc"))
            {
                ctx.Context.Response.StatusCode = 404;
            }
        }
    };
    if (app.Environment.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});

// 配置MVC路由，仅处理/mvc前缀的请求
app.MapControllerRoute(
    name: "mvc",
    pattern: "mvc/{controller=Home}/{action=Index}/{id?}");
app.MapRazorPages(pattern: "mvc/{*page}");

app.Run();

适用场景： #

• 计划最终完全替换为Angular，前期保留MVC作为过渡
• 用户访问根路径直接进入Angular应用，原有MVC页面通过/mvc前缀访问

关键注意事项 #

• API调用统一：同域名下Angular和MVC可直接使用相对路径调用API，避免跨域问题
• 身份认证共享：若使用Cookie认证，Angular的HttpClient需配置withCredentials: true；若用JWT，确保双方认证逻辑一致
• 开发调试：开发环境可通过ASP.NET Core代理Angular请求，或在Angular中配置proxy.conf.json转发API请求到后端API项目
• 部署策略：生产环境将Angular打包文件放入ASP.NET Core指定静态目录，一起部署即可

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