Angular 12路由路径含斜杠时静态资源404报错问题咨询

• 核心原因是Angular项目src/index.html文件内的<base href>配置为相对路径（比如./或空值），导致浏览器解析静态资源路径时会将当前路由的路径前缀作为基础路径拼接。
• 访问一级路由http://localhost:4200/home时，相对路径的静态资源会被解析到站点根目录http://localhost:4200/下，资源路径正确所以访问正常。
• 访问二级及以上路由http://localhost:4200/home/something时，浏览器会将/home/识别为当前基础路径，拼接静态资源后得到http://localhost:4200/home/runtime.js这类错误路径，触发404报错，资源加载失败后页面显示空白。

• 方案1（推荐）：将index.html中的base配置修改为根路径绝对路径：

<base href="/">

如果项目需要部署在域名子目录下，将上述值改为对应子目录路径即可，比如部署在/my-app/下就配置为<base href="/my-app/">，同时打包时执行命令ng build --base-href /my-app/。

• 方案2：改用Hash路由模式，路由配置中添加useHash: true参数，该方案会在路由路径中增加#标识，无需调整服务端路由重写规则：

@NgModule({
  imports: [RouterModule.forRoot(appRoutes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

内容的提问来源于stack exchange，提问作者Bartłomiej Jatczak