如何启动已发布的ASP.NET Angular应用程序

核心问题 #

你用dotnet publish --configuration test发布后出现404，主要有两个原因：

1. 你的PublishRunWebpack目标硬编码了Angular的构建配置为production，不管发布时指定的是test还是其他配置，都会构建生产环境包，和ASP.NET运行环境不匹配；
2. ASP.NET项目大概率没配置静态文件托管和SPA路由 fallback 中间件，无法返回Angular页面。

分步解决 #

1. 修改csproj，让Angular构建匹配发布配置 #

把PublishRunWebpack目标里的构建命令改成动态读取当前Configuration值，发布test配置时，Angular也会用test配置构建：

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
  <!-- 确保Node依赖安装 -->
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  <!-- 动态使用当前发布的Configuration构建Angular -->
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --configuration $(Configuration)" />

  <!-- 包含构建后的文件到发布输出 -->
  <ItemGroup>
    <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
    <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
      <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
    </ResolvedFileToPublish>
  </ItemGroup>
</Target>

2. 配置ASP.NET托管静态文件和SPA Fallback #

在Program.cs（.NET 6+默认使用）里添加静态文件托管和SPA中间件，确保ASP.NET能返回Angular静态文件，同时处理单页应用的路由 fallback：

var builder = WebApplication.CreateBuilder(args);

// 根据项目需求添加控制器服务
builder.Services.AddControllersWithViews();

var app = builder.Build();

// 配置HTTP请求管道
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
// 开启静态文件托管，指向存放Angular构建文件的wwwroot目录
app.UseStaticFiles();

// 配置SPA路由 fallback，当匹配不到API路由时返回Angular的index.html
app.MapFallbackToFile("index.html");

app.MapControllers();

app.Run();

3. 验证发布流程 #

执行以下步骤确认：

• 运行dotnet publish --configuration test，查看输出日志，确认Angular用test配置完成构建，且文件被拷贝到bin/test/net6.0/publish/wwwroot目录；
• 运行dotnet bin/test/net6.0/publish/MyApp.Client.dll（注意要指向publish子目录下的dll，发布产物都在这里）；
• 访问ASP.NET监听的端口，即可正常加载Angular应用。

额外说明 #

不需要分别运行ASP.NET和Angular，ASP.NET可以直接托管Angular的构建产物。开发环境用SpaProxy是为了热重载，发布后直接托管静态文件即可。

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