Angular+NX应用多路径URL下样式加载错误的解决方法

问题根源 #

当访问多段路径URL（如localhost:4200/app/user）时，浏览器会以当前URL的路径作为相对资源请求的基准，导致样式文件被请求到/restore/styles.css这类错误路径。服务器找不到对应资源时会返回404 HTML页面，触发MIME类型不匹配的报错。而单段路径时，相对路径会被解析为根目录，因此加载正常。

解决方案 #

• 设置正确的<base href>
  在项目根目录的src/index.html中，确保<head>标签内包含根路径基准配置：

  <base href="/">
  

  该配置会强制所有资源请求从网站根目录出发，而非当前URL的子路径。

• 校验Angular构建配置
  打开angular.json，定位到对应项目的architect.build.options节点：

  • 确保styles数组中的路径为根相对路径（如["src/styles.css"]），避免使用相对子目录的路径
  • 确认assets配置正确，静态资源均指向根目录下的对应文件

• 改用哈希路由（HashLocationStrategy）
  如果部署环境无法支持HTML5路由的 fallback 配置，可以切换到哈希路由：

  1. 在app.module.ts中导入依赖：

     import { LocationStrategy, HashLocationStrategy } from '@angular/common';
     

  2. 在@NgModule的providers数组中添加路由策略配置：

     providers: [
       { provide: LocationStrategy, useClass: HashLocationStrategy }
     ]
     

  切换后URL会变为localhost:4200/#/restore/user-id，刷新时浏览器不会将哈希后的路径发送给服务器，资源请求始终从根目录发起。

• NX项目专属配置
  如果是NX monorepo项目：

  • 检查项目的project.json，在targets.build.options中设置baseHref: "/"
  • 启动项目时添加基准路径参数：nx serve your-app-name --base-href /

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