Angular带路径参数路由刷新/直接访问时出现MIME类型错误

问题核心 #

直接在浏览器输入reviews/:id路径或刷新页面时，样式表等静态资源请求返回的是HTML文件（MIME类型为text/html），而非正确的CSS资源，触发浏览器报错。根源在于：

• 静态资源使用相对路径，浏览器在嵌套路由下会错误拼接资源路径
• 服务器未配置单页应用（SPA）路由重定向，无法正确处理客户端路由请求

解决方案 #

1. 修正静态资源引用路径 #

打开项目根目录的index.html，将所有静态资源（CSS、JS、字体等）的引用改为绝对路径（以/开头）：

<!-- 错误示例：相对路径 -->
<link rel="stylesheet" href="styles.css">
<!-- 正确示例：绝对路径 -->
<link rel="stylesheet" href="/styles.css">

无论当前路由是reviews还是reviews/123，浏览器都会从网站根目录加载资源，避免路径拼接错误。

2. 配置服务器路由重定向 #

Angular是SPA，所有客户端路由请求最终需指向index.html，服务器需配置规则将非静态资源请求转发到首页：

• Nginx：在站点配置的location /块中添加：

  try_files $uri $uri/ /index.html;
  

• Apache：在项目根目录创建.htaccess文件，添加：

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  

• Express(Node.js)：在服务器代码中添加：

  const path = require('path');
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/你的项目名称/index.html'));
  });
  

3. 确认多模块路由配置 #

由于两个路由分属不同模块，需确保路由注册正确：

• 若使用懒加载，主路由配置应使用loadChildren：

  // 主路由示例
  const routes: Routes = [
    { path: 'reviews', loadChildren: () => import('./reviews/reviews.module').then(m => m.ReviewsModule) },
    { path: 'reviews/:id', loadChildren: () => import('./review-viewer/review-viewer.module').then(m => m.ReviewViewerModule) }
  ];
  

• 若直接导入模块，需确保子模块的RouterModule.forChild()配置正确，且已在主模块中导入对应子模块。

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