如何从ASP.NET Core Web API应用中托管已编译的Angular应用

1. 准备Angular编译文件 #

• 先在Angular项目根目录执行编译命令，生成生产环境的dist目录：

  ng build --prod
  

• 将编译后dist/[你的Angular项目名称]下的所有文件，复制到ASP.NET Core项目的静态文件目录，默认推荐用wwwroot，也可以自定义目录比如ClientApp/dist。

2. 配置StaticFiles中间件 #

在ASP.NET Core的Program.cs（.NET 6+）或Startup.cs（旧版本）中，添加静态文件中间件：

// 若使用自定义目录（比如ClientApp/dist）
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "ClientApp", "dist")),
    RequestPath = "" // 设为空，让根路径直接指向Angular应用
});

// 若使用默认wwwroot目录，直接简化为：
// app.UseStaticFiles();

3. 解决Angular路由刷新404问题 #

Angular是单页应用，客户端路由不存在对应的物理文件，用户刷新或直接访问路由时会返回404。需要添加回退路由，将所有非API请求转发到Angular的index.html：

app.UseRouting();

app.UseEndpoints(endpoints =>
{
    // 先配置API接口路由
    endpoints.MapControllers();

    // 所有非API的GET请求都返回Angular的index.html
    endpoints.MapFallbackToFile("index.html");
});

如果你的API有固定前缀（比如/api），可以更精准地过滤请求：

endpoints.MapFallback(async context =>
{
    if (!context.Request.Path.StartsWithSegments("/api") && context.Request.Method == "GET")
    {
        context.Response.ContentType = "text/html";
        await context.Response.SendFileAsync(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "index.html"));
    }
});

4. 可选：非根路径部署配置 #

如果Angular应用需要部署在非根路径（比如/app），编译时要指定base-href：

ng build --prod --base-href /app/

同时修改ASP.NET的静态文件配置：

app.UseStaticFiles(new StaticFileOptions
{
    RequestPath = "/app"
});
endpoints.MapFallbackToFile("/app/index.html");

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