Angular+ASP.NET Core SPA在IIS中无法配置自定义404页面问题

问题根源 #

Angular启用哈希路由时，#后的路径不会发送到服务器，IIS的404配置仅对服务器端请求生效。访问https:///root.html#/bogus时，服务器仅返回root.html，由Angular前端路由解析路径。当前Angular路由未配置未知路径的处理逻辑，导致触发NG04002错误并自动回退到之前的有效路由。

解决方案 #

1. 修改Angular路由配置，添加通配符路由 #

在Angular的路由配置文件（通常为app-routing.module.ts）中，添加匹配所有未定义路由的通配符规则，指定自定义404处理逻辑：

方式一：使用Angular组件展示404内容

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductComponent } from './product/product.component';
import { NotFoundComponent } from './not-found/not-found.component'; // 自定义404组件

const routes: Routes = [
  { path: 'product/:id', component: ProductComponent },
  // 其他已配置路由...
  { path: '**', component: NotFoundComponent } // 通配符路由必须放在最后
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })], // 确认启用哈希路由
  exports: [RouterModule]
})
export class AppRoutingModule { }

方式二：跳转到静态404页面（GenError404.html）

若要直接使用已有的GenError404.html，配置路由重定向到该静态文件：

const routes: Routes = [
  { path: 'product/:id', component: ProductComponent },
  // 其他已配置路由...
  { path: '**', redirectTo: '/assets/GenError404.html' }
];

注意：需将GenError404.html放在Angular项目的src/assets目录下，构建后会被复制到dist目录的assets文件夹，根据实际部署路径调整访问地址。

2. 确认ASP.NET Core的SPA配置 #

在Startup.cs的Configure方法中，确保SPA配置正确映射到Angular入口文件root.html：

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp"; // 按你的前端项目路径调整
    spa.Options.DefaultPage = "/root.html"; // 指定入口文件为root.html

    if (env.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});

3. IIS配置说明 #

对于哈希路由的前端路径，无需修改IIS的404设置——因为服务器不会接收#后的路径。IIS的404配置仅对直接访问服务器端不存在的路径（如https:///invalid-path）生效。

验证步骤 #

1. 重新构建Angular项目：ng build --prod
2. 将构建产物部署到IIS
3. 访问https:///root.html#/bogus，确认是否显示自定义404页面

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