修改ASP.NET项目中Angular的输出目录至wwwroot外指定文件夹

一、将Angular构建输出改为根目录下的ClientApp/dist #

1. 修改Angular配置 #

打开Angular项目根目录下的 angular.json，找到projects -> 你的项目名称 -> architect -> build -> options，将outputPath的值替换为../ClientApp/dist（适配Angular项目在ClientApp文件夹内的结构，确保构建产物输出到根目录的ClientApp/dist下）：

"options": {
  "outputPath": "../ClientApp/dist",
  // 其余配置保持不变
}

2. 配置ASP.NET静态文件与路由 #

替换原有静态文件配置代码，确保ASP.NET能正确读取ClientApp/dist的文件，同时处理Angular单页应用的路由 fallback（避免刷新页面或直接访问路由时404）：

// 配置默认文件，访问根路径时自动加载index.html
app.UseDefaultFiles(new DefaultFilesOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(builder.Environment.ContentRootPath, "ClientApp", "dist")),
    RequestPath = "/"
});

// 配置静态文件访问规则
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(builder.Environment.ContentRootPath, "ClientApp", "dist")),
    RequestPath = "/"
});

// 关键：所有非API请求都 fallback 到Angular的index.html，保证单页路由正常
app.MapFallbackToFile("/index.html", new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(builder.Environment.ContentRootPath, "ClientApp", "dist"))
});

二、将Angular构建输出改为wwwroot/dist #

1. 修改Angular配置 #

同样编辑angular.json的outputPath，将其设置为../wwwroot/dist（适配Angular在ClientApp内的结构）：

"options": {
  "outputPath": "../wwwroot/dist",
  // 其余配置保持不变
}

2. 配置ASP.NET静态文件与路由 #

调整静态文件指向wwwroot/dist，同时保留路由 fallback 配置：

app.UseDefaultFiles(new DefaultFilesOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(builder.Environment.WebRootPath, "dist")),
    RequestPath = "/"
});

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(builder.Environment.WebRootPath, "dist")),
    RequestPath = "/"
});

// 处理Angular单页路由的fallback
app.MapFallbackToFile("/index.html", new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(builder.Environment.WebRootPath, "dist"))
});

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