ASP.NET Core 2.1多Angular应用工作区配置及路由设置需求

我来帮你搞定这个多Angular应用搭配ASP.NET Core 2.1的路由配置问题，分几个清晰的步骤来操作：

第一步：改造Angular工作区为多应用结构 #

你当前的angular-cli.json只有单个应用配置，我们需要把它扩展成多应用结构：

1. 调整目录结构 #

把原来的src目录拆分成两个独立的应用目录：

• src/main-app：存放第一个（main）应用的所有代码（包括app组件、main.ts、index.html等）
• src/admin-app：存放第二个（admin）应用的所有代码

2. 更新angular-cli.json的apps数组 #

修改后的配置如下，给每个应用指定独立的根目录、输出目录和配置文件：

"apps": [
  {
    "name": "main", // 给应用命名，方便后续编译命令更直观
    "root": "src/main-app",
    "outDir": "dist/main", // 编译产物输出到dist/main
    "assets": ["assets"],
    "index": "index.html",
    "main": "main.ts",
    "polyfills": "polyfills.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.main.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "main-app", // 组件前缀和admin应用区分开，避免冲突
    "styles": ["styles.css"]
  },
  {
    "name": "admin",
    "root": "src/admin-app",
    "outDir": "dist/admin", // 编译产物输出到dist/admin
    "assets": ["assets"],
    "index": "index.html",
    "main": "main.ts",
    "polyfills": "polyfills.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.admin.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "admin-app",
    "styles": ["styles.css"]
  }
]

3. 编译多应用 #

现在可以通过命名来编译指定应用：

• 编译main应用：ng build --app main
• 编译admin应用：ng build --app admin
  如果需要生产环境编译，加上--prod参数即可。

第二步：配置ASP.NET Core 2.1的路由与静态文件 #

接下来在Startup.cs中配置，把/main和/admin路径分别映射到对应的Angular应用：

1. 基本静态文件与SPA Fallback配置 #

修改Configure方法，使用Map来隔离两个应用的路由：

using System.IO;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.FileProviders;
using Microsoft.Extensions.DependencyInjection;

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        // 如果你需要API服务，添加Mvc配置
        services.AddMvc();
        
        // 可选：添加SPA静态文件支持（方便开发环境调试）
        services.AddSpaStaticFiles();
    }

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseHsts();
        }

        // 映射/main路径到main应用
        app.Map("/main", mainApp =>
        {
            // 配置静态文件：将dist/main的文件映射到/main路径下
            mainApp.UseStaticFiles(new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(
                    Path.Combine(env.ContentRootPath, "dist/main")),
                RequestPath = "" // 这里设为空，确保访问/main时直接指向dist/main的根
            });

            // Angular SPA路由Fallback：处理刷新或直接访问子路由的情况
            mainApp.Use(async (context, next) =>
            {
                // 排除API请求，让Mvc处理
                if (!context.Request.Path.Value.StartsWith("/api"))
                {
                    context.Response.ContentType = "text/html";
                    await context.Response.SendFileAsync(Path.Combine(env.ContentRootPath, "dist/main/index.html"));
                }
                else
                {
                    await next();
                }
            });
        });

        // 映射/admin路径到admin应用，逻辑和main一致
        app.Map("/admin", adminApp =>
        {
            adminApp.UseStaticFiles(new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(
                    Path.Combine(env.ContentRootPath, "dist/admin")),
                RequestPath = ""
            });

            adminApp.Use(async (context, next) =>
            {
                if (!context.Request.Path.Value.StartsWith("/api"))
                {
                    context.Response.ContentType = "text/html";
                    await context.Response.SendFileAsync(Path.Combine(env.ContentRootPath, "dist/admin/index.html"));
                }
                else
                {
                    await next();
                }
            });
        });

        // 启用Mvc处理API请求
        app.UseMvc();
    }
}

2. 开发环境优化（可选） #

如果想在开发环境直接使用Angular的热重载服务，不用每次编译到dist目录，可以修改Map块中的配置，添加代理到Angular dev server：

首先在package.json中添加启动脚本：

"scripts": {
    "start:main": "ng serve --app main --port 4200",
    "start:admin": "ng serve --app admin --port 4201",
    "start:backend": "dotnet run"
}

然后修改Startup.cs的Configure方法中对应的Map块：

// 开发环境下代理到Angular dev server
if (env.IsDevelopment())
{
    mainApp.UseProxyToSpaDevelopmentServer("http://localhost:4200");
}
else
{
    // 生产环境使用静态文件
    mainApp.UseStaticFiles(...);
    mainApp.Use(...); // SPA Fallback逻辑
}

这样开发时，你可以同时启动npm run start:main、npm run start:admin和npm run start:backend，修改Angular代码会自动刷新。

关键注意事项 #

• 两个Angular应用的组件前缀（prefix）必须不同，避免组件选择器冲突
• 每个应用的tsconfig可以共用基础的tsconfig.json，然后各自的tsconfig.main.json和tsconfig.admin.json通过extends继承基础配置
• 确保ASP.NET Core的ContentRootPath指向项目根目录，这样Path.Combine才能正确找到dist目录

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