如何在C#或Angular中为ClientApp添加第二个访问路径？

一、C#后端配置多路径静态资源挂载 #

1. 保留主项目默认配置 #

继续使用原有的Spa静态文件配置，对应主Angular项目的ClientApp/dist目录：

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

2. 挂载第二个Angular项目（/b路径） #

假设第二个Angular项目构建后的文件存放于ClientApp/dist-b目录（可根据实际构建路径调整），在program.cs中添加映射配置：

// 映射/b路径到第二个Angular项目的构建目录
app.Map("/b", appBuilder =>
{
    // 配置静态文件读取
    appBuilder.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(builder.Environment.ContentRootPath, "ClientApp/dist-b")),
        RequestPath = "/b"
    });

    // 处理Angular路由刷新问题，避免直接访问子路由返回404
    appBuilder.Use(async (context, next) =>
    {
        if (!context.Request.Path.HasValue || !context.Request.Path.Value.StartsWith("/b/assets"))
        {
            context.Request.Path = "/b/index.html";
        }
        await next();
    });
});

3. 配置/setting路径指向对应Angular构建文件 #

针对ClientApp/dist/setting目录的构建产物，同样通过Map挂载：

// 映射/setting路径到对应构建目录
app.Map("/setting", appBuilder =>
{
    appBuilder.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(builder.Environment.ContentRootPath, "ClientApp/dist/setting")),
        RequestPath = "/setting"
    });

    // 处理Angular路由刷新
    appBuilder.Use(async (context, next) =>
    {
        if (!context.Request.Path.HasValue || !context.Request.Path.Value.StartsWith("/setting/assets"))
        {
            context.Request.Path = "/setting/index.html";
        }
        await next();
    });
});

二、Angular项目构建配置调整 #

1. 第二个Angular项目（/b路径） #

修改项目的angular.json，设置构建输出路径和基础路径：

• 构建命令：ng build --base-href /b/ --output-path ../ClientApp/dist-b
• 或直接在angular.json的build配置中添加：

"build": {
  "options": {
    "baseHref": "/b/",
    "outputPath": "../ClientApp/dist-b",
    // 其他原有配置
  }
}

2. /setting路径对应的Angular项目 #

同样调整构建配置，确保基础路径和输出目录匹配：

• 构建命令：ng build --base-href /setting/ --output-path ../ClientApp/dist/setting
• 或修改angular.json：

"build": {
  "options": {
    "baseHref": "/setting/",
    "outputPath": "../ClientApp/dist/setting",
    // 其他原有配置
  }
}

三、注意事项 #

• 确保所有构建目录的文件已生成，且C#后端拥有目录读取权限。
• 主项目的Spa fallback配置需保留，保证根路径下的Angular路由正常工作：

app.UseSpaStaticFiles();

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
    // 开发环境可保留Angular Cli服务配置
    if (builder.Environment.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});

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