默认ASP.NET Core 9与Angular模板发布后无法运行求助

问题根源 #

1. 你手动将dist/browser文件复制到wwwroot/browser子目录后，Angular打包生成的静态资源（JS/CSS/图片等）引用路径仍为根路径（比如/main.js），但实际资源位于/browser/目录下，导致浏览器请求时找不到文件，触发404错误。
2. MapFallbackToFile的路径配置存在问题，同时静态文件中间件的资源映射逻辑未适配当前目录结构。

解决步骤 #

1. 修正Angular打包配置（推荐，避免手动复制） #

直接让Angular打包时自动输出到wwwroot/browser，并适配路径：

• 打开Angular项目的angular.json，在projects -> [你的项目名] -> architect -> build -> options中添加：

  "baseHref": "/browser/",
  "outputPath": "../wwwroot/browser"
  

  执行ng build后，文件会自动输出到wwwroot/browser，且所有资源引用路径会自动带上/browser/前缀，无需手动复制。

2. 调整ASP.NET Core服务端配置 #

如果已经手动复制了文件，修改以下配置：

• 确保app.UseStaticFiles();语句在MapFallbackToFile之前执行（静态文件中间件必须先注册）。
• 将Fallback路由修改为：

  app.MapFallbackToFile("browser/index.html");
  

  注意不要加开头的/，因为MapFallbackToFile的路径是相对于wwwroot目录的。

3. 检查静态资源引用路径 #

打开wwwroot/browser/index.html，确认所有JS、CSS文件的引用路径是否为/browser/xxx.js或./xxx.js。如果是根路径（比如/main.js），需手动修改为相对路径或添加/browser/前缀，或者通过Angular的baseHref配置自动生成正确路径。

4. 恢复自动发布逻辑（最佳实践） #

默认模板应该自动处理Angular打包和文件复制，若你的项目没有该逻辑，需在服务端项目的.csproj文件中添加以下配置，确保dotnet publish时自动完成Angular打包并复制到wwwroot：

<Target Name="PublishAngular" AfterTargets="ComputeFilesToPublish">
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />
  <ItemGroup>
    <DistFiles Include="$(SpaRoot)dist/browser/**" />
    <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
      <RelativePath>wwwroot/%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
    </ResolvedFileToPublish>
  </ItemGroup>
</Target>

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