Angular SPA路由直接地址栏访问返回404及根路径访问异常问题

问题现象 #

• 将Angular编译文件部署到.NET 6 Web API的wwwroot文件夹后，应用内路由跳转正常，但直接在地址栏输入带哈希的URL（如https://localhost:5001/#/flower/list）时返回HTTP 404
• 访问根路径http://localhost:5001返回404，必须手动输入http://localhost:5001/index.html才能进入应用

核心原因 #

.NET 6 Web API默认仅处理已存在的静态文件请求和API接口请求，对于根路径、未匹配的路由请求，不会自动转发到index.html，导致Angular无法接管路由逻辑；同时未配置默认页，根路径无法自动加载index.html。

解决方案 #

1. 修改Program.cs配置 #

步骤1：添加默认页支持

在UseStaticFiles()之前添加UseDefaultFiles()，让根路径自动返回index.html：

app.UseDefaultFiles();
app.UseStaticFiles();

注意：UseDefaultFiles必须放在UseStaticFiles之前，因为它会优先检查并返回默认文件（如index.html）。

步骤2：添加SPA Fallback路由

在MapControllers()之后添加Fallback配置，将所有非API的请求转发到index.html，让Angular路由接管处理：

app.MapFallbackToFile("index.html");

修改后的完整Program.cs代码：

var builder = WebApplication.CreateBuilder(args);

var devCorsPolicy = "devCorsPolicy";
builder.Services.AddCors(options =>
{
    options.AddPolicy(devCorsPolicy, builder => {
        builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
    });
});

builder.Services.AddControllers();

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseCors(devCorsPolicy);
}

app.UseHttpsRedirection();
app.UseDefaultFiles(); // 新增：配置默认页
app.UseStaticFiles();

app.UseAuthorization();

app.MapControllers();

app.MapFallbackToFile("index.html"); // 新增：SPA请求转发

app.Run();

2. 修正Angular路由的路径问题（可选） #

查看你的app-routing.module.ts，子路由的path: 'flower'与父路径path:'flower'重复，会导致实际路由为#/flower/flower，与你描述的#/flower/list不符，建议修正路由配置：

const routes: Routes = [
  {path:'', redirectTo: 'flower/list', pathMatch:'full'},
  { 
    path:'flower', canActivate:[CommonGuard], children:[
      {path: 'list', component: FlowerListComponent },
      {path: 'details/:id',component: FlowerDetailsComponent }
  ]
  },
];

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