多Angular项目下.NET Core路由中app.MapWhen()及静态资源加载问题

背景 #

应用包含两个Angular 15前端项目：

• back 项目存放于 wwwroot/back
• survey 项目存放于 wwwroot/survey

目标 #

访问 www.toto.com/survey 时加载 survey 项目，其余所有URL均加载 back 项目。

当前配置 #

现有.NET Core配置代码：

app.UseFileServer(new FileServerOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(env.WebRootPath, "survey")),
    RequestPath = new PathString("/survey")
});

app.UseFileServer(new FileServerOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(env.WebRootPath, "back")),
    RequestPath = ""
});

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
    endpoints.MapFallback(context =>
    {
        if (context.Request.Path.StartsWithSegments("/survey"))
        {
            context.Response.ContentType = "text/html";
            return context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "survey", "index.html"));
        }

        // Serve the index.html from back folder for all other paths
        context.Response.ContentType = "text/html";
        return context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "back", "index.html"));
    });
});

问题 #

访问 /survey 路径时，index.html 能正常加载，但JavaScript文件加载失败，提示资源路径错误；back 项目运行完全正常。

1. 修正Angular项目的Base Href #

Angular打包时未指定正确的base href是资源路径错误的核心原因，需为survey项目配置对应路径：

• 打包时直接指定：

ng build --base-href /survey/

• 或在angular.json的architect.build.options中持久化配置：

"options": {
  "baseHref": "/survey/",
  // 其他原有配置
}

back项目保持默认的/即可，无需修改。

2. 优化.NET Core的静态文件与路由配置 #

通过MapWhen精准隔离两个项目的请求处理逻辑，配合SPA专属的MapFallbackToFile方法替代手动文件发送，确保资源路由正确：

// 先初始化路由系统
app.UseRouting();

// 单独处理所有/survey开头的请求
app.MapWhen(context => context.Request.Path.StartsWithSegments("/survey"), app =>
{
    // 配置survey项目的静态文件服务，启用默认文件自动返回index.html
    app.UseFileServer(new FileServerOptions
    {
        FileProvider = new PhysicalFileProvider(Path.Combine(env.WebRootPath, "survey")),
        RequestPath = "/survey",
        EnableDefaultFiles = true
    });

    // survey项目的SPA路由fallback，处理所有子路径
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapFallbackToFile("/survey/{*path}", "survey/index.html");
    });
});

// 配置back项目的静态文件服务作为默认处理
app.UseFileServer(new FileServerOptions
{
    FileProvider = new PhysicalFileProvider(Path.Combine(env.WebRootPath, "back")),
    RequestPath = "",
    EnableDefaultFiles = true
});

// 处理API路由与back项目的SPA fallback
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
    endpoints.MapFallbackToFile("{*path}", "back/index.html");
});

3. 逻辑说明 #

• MapWhen将/survey前缀的请求完全隔离，避免与back项目的静态文件规则冲突；
• EnableDefaultFiles自动处理/survey根路径的index.html返回，无需手动判断；
• MapFallbackToFile是.NET Core专为SPA设计的fallback方法，能正确匹配所有子路径的路由请求，确保资源路径解析正确。

内容的提问来源于stack exchange，提问作者Antoine a.k.a Zesso Renoux