Angular 7.3与.NET 8部署IIS报Uncaught SyntaxError问题求助

1. 静态文件路由配置异常 #

ASP.NET Core的静态文件中间件未正确加载，导致JS文件请求被路由到SPA fallback页（通常是index.html），返回HTML内容而非JS文件。检查Program.cs中的中间件顺序，确保静态文件相关配置优先于路由和SPA中间件：

app.UseStaticFiles();
app.UseSpaStaticFiles();

app.UseRouting();

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller}/{action=Index}/{id?}");
});

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
    if (env.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});

UseStaticFiles必须在UseRouting和UseSpa之前调用，保证静态文件请求被优先处理。

2. Angular构建路径与IIS虚拟目录不匹配 #

部署到IIS虚拟目录时，Angular的base-href配置错误，导致浏览器请求JS文件的路径指向错误地址，最终被SPA fallback返回index.html。重新构建Angular时指定对应路径：

ng build --prod --base-href "/你的虚拟目录名/"

也可直接修改angular.json中projects.你的项目名.architect.build.options.baseHref为虚拟目录路径。

3. IIS MIME类型或请求筛选配置问题 #

• IIS未正确设置.js文件的MIME类型，导致服务器无法识别JS文件，返回默认HTML页面。检查站点MIME类型，确保存在.js对应application/javascript。
• IIS请求筛选可能拦截了包含runtime、polyfills等关键词的文件，导致请求被拦截后返回HTML格式的错误页面。

4. 发布流程中的文件覆盖问题 #

.csproj中的发布配置可能存在错误，导致Angular构建的JS文件被HTML文件覆盖。检查项目文件中的发布目标，确保Angular的dist目录被正确包含：

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />

  <ItemGroup>
    <DistFiles Include="$(SpaRoot)dist\**" />
    <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
      <RelativePath>%(DistFiles.Identity)</RelativePath>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
    </ResolvedFileToPublish>
  </ItemGroup>
</Target>

确认该目标会正确执行Angular构建并将dist文件复制到发布包中。

5. .NET 8 SPA中间件行为变更 #

.NET 8的SPA中间件 fallback逻辑与旧版本（.NET Core 2.1）存在差异，可能导致静态文件请求被误触发fallback。检查UseSpa配置，确保仅当请求路径不存在时才返回index.html，避免覆盖正常的静态文件请求。

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