Angular 18带参数路由异常：静态资源加载路径错误

问题根源 #

访问带参数的路由/Chapter/2时，浏览器错误地从/Chapter/路径下加载styles.css、polyfills.js等静态资源，导致404和MIME类型错误。核心原因是**index.html中静态资源使用了相对路径**，浏览器会以当前路由的路径作为基础路径发起资源请求，而非网站根目录。

解决方案 #

1. 修正index.html中的资源路径 #

将所有静态资源的引用改为绝对路径（添加根路径前缀/），确保浏览器从网站根目录加载资源：

<!-- 错误写法 -->
<link rel="stylesheet" href="styles.css">
<script src="polyfills.js"></script>
<script src="main.js"></script>
<script src="scripts.js"></script>

<!-- 正确写法 -->
<link rel="stylesheet" href="/styles.css">
<script src="/polyfills.js"></script>
<script src="/main.js"></script>
<script src="/scripts.js"></script>

2. 统一AdminLTE资源的引用路径 #

如果AdminLTE的CSS/JS是通过组件或模板引入的，同样使用绝对路径或基于assets目录的路径：

• 若AdminLTE资源放在src/assets/adminlte/目录下，引用时写：

<link rel="stylesheet" href="/assets/adminlte/css/adminlte.min.css">
<script src="/assets/adminlte/js/adminlte.min.js"></script>

3. 统一路由大小写（可选） #

路由配置中定义的是Chapter/:id，访问时用chapter/2，虽然Angular路由默认不区分大小写，但统一大小写可避免潜在问题，建议访问路径与路由配置保持一致。

内容的提问来源于stack exchange，提问作者Sharif.rifat