Angular 12带参数页面刷新空白并报MIME错误求助

问题根源 #

刷新带参数路由（如/media/690）时，浏览器会以当前路由路径作为资源请求的相对路径（例如请求/user/runtime.js而非根路径下的/runtime.js），导致资源404；服务器返回HTML页面替代缺失的JS/CSS文件，触发MIME类型校验错误，最终页面空白。

具体解决步骤 #

1. 确保index.html中base href配置正确 #

打开项目根目录下的index.html，确认<base>标签的href属性设置为根路径：

<base href="/">

如果项目部署在子目录（如/app/），则对应设置为<base href="/app/">。

2. 配置服务器SPA fallback规则（核心解决措施） #

Angular是单页应用（SPA），刷新非根路由时，服务器需要将所有路由请求转发到index.html，避免返回404页面。根据你的服务器类型配置：

• Nginx：在server配置块中添加：

  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]
  

• IIS：通过IIS管理器添加URL重写规则，将所有非文件/目录的请求指向index.html。

3. 修正路由参数获取的错误 #

你的MediaPage组件中，路由配置的参数名是id（path: 'media/:id'），但代码中错误地获取msg_id，需修改：

ngOnInit() {
  this.activateRoute.paramMap.subscribe(params => {
    const id = params.get('id'); // 替换msg_id为id
    console.log(id);
  });
}

4. 规范路由跳转写法 #

推荐使用数组格式的路由跳转方式，避免字符串拼接可能导致的路径错误：

this.router.navigate(['/media', media.msg_id], navigationExtras);

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