ASP.NET Core 7部署多本地化Angular应用遇路由错误求助

问题原因 #

ASP.NET Core 6+的端点路由机制与旧版本不同，全局的MapFallbackToFile不会作用到Map创建的子路由管道中。当请求/de或/en时，子管道走到终点却没有匹配到任何端点，因此抛出错误。

修正方案 #

需要在每个本地化路由的子管道内配置对应的回退端点，同时确保Spa静态文件中间件正确注册。

修改后的完整代码 #

var builder = WebApplication.CreateBuilder(args);

// 添加Spa静态文件服务，指定根路径为Angular编译后的dist目录
builder.Services.AddSpaStaticFiles(config =>
{
    config.RootPath = "ClientApp/dist";
});

var app = builder.Build();

// 常规中间件配置
app.UseExceptionHandler("/Error");
app.UseHttpsRedirection();
app.UseStaticFiles();
// 启用Spa静态文件中间件
app.UseSpaStaticFiles();

// 配置德语Angular应用路由
app.Map("/de", deApp =>
{
    deApp.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp/dist/de";
        spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
        {
            FileProvider = new PhysicalFileProvider(
                Path.Combine(Directory.GetCurrentDirectory(), "ClientApp", "dist", "de"))
        };
    });
    // 在子管道内添加回退端点，匹配所有非文件请求
    deApp.MapFallbackToFile("index.html");
});

// 配置英语Angular应用路由
app.Map("/en", enApp =>
{
    enApp.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp/dist/en";
        spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
        {
            FileProvider = new PhysicalFileProvider(
                Path.Combine(Directory.GetCurrentDirectory(), "ClientApp", "dist", "en"))
        };
    });
    // 在子管道内添加回退端点
    enApp.MapFallbackToFile("index.html");
});

// 根路径重定向到默认语言（可选，根据需求调整）
app.MapFallback(context =>
{
    context.Response.Redirect("/en");
    return Task.CompletedTask;
});

app.Run();

关键修改点 #

• 添加AddSpaStaticFiles服务：注册Spa静态文件服务，确保Angular编译后的静态资源能被正确访问。
• 子管道内添加MapFallbackToFile：每个本地化路由的子管道中单独配置回退端点，处理Angular的单页应用路由，确保请求能匹配到对应的index.html。
• 保留UseSpaStaticFiles中间件：启用Spa静态文件中间件，配合Spa中间件处理静态资源请求。

开发环境代理配置（可选） #

如果需要在开发环境代理到Angular开发服务器，只需在对应子管道的UseSpa内添加代理配置，注意指定对应语言的路径：

if (app.Environment.IsDevelopment())
    spa.UseProxyToSpaDevelopmentServer("http://localhost:4200/de"); // 德语代理路径

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