运行含Home组件的Angular应用报错：拒绝应用样式、图片找不到求助

问题描述 #

运行包含Home组件的Angular应用时，出现两个异常：

1. 样式加载报错：Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type
2. 存放于/src/assets目录下的图片无法加载
   已尝试更新angular.json、检查资源路径、升级NPM版本，问题仍未解决。

核心排查与修复步骤 #

• 调整路由顺序，避免资源请求被拦截
  路由通配符(**)若放置在其他路由之前，会导致Angular将CSS、图片等资源请求误判为路由请求，返回404页面（MIME类型为text/html）。需确保通配符路由是最后一项：

  const routes: Routes = [
    { path: 'home', component: HomeComponent },
    // 其他业务路由...
    { path: '**', component: PageNotFoundComponent } // 必须放在路由数组末尾
  ];
  

• 校验angular.json的资源配置
  确认assets数组正确包含目标目录，同时检查全局样式路径：

  "architect": {
    "build": {
      "options": {
        "assets": [
          "src/favicon.ico",
          "src/assets" // 确保此配置项存在，路径无多余斜杠或拼写错误
        ],
        "styles": [
          "./assets/styles/your-main-style.css" // 若引用assets内的CSS，路径需正确
        ]
      }
    }
  }
  

• 修正组件内资源引用路径
  在Home组件的模板或样式文件中，使用正确的资源路径：

  • 模板图片引用：<img src="assets/images/your-image.png" alt="描述">
  • 组件样式背景图：background-image: url('../assets/images/your-image.png');（路径相对于当前组件文件位置）

• 清理缓存并重新构建项目
  执行以下命令彻底清理缓存与依赖，重新构建：

  ng cache clean --all
  rm -rf node_modules package-lock.json
  npm install
  ng build
  ng serve --no-cache
  

• 检查开发服务器配置
  若使用自定义服务器配置，确认没有重写规则干扰资源请求。临时使用ng serve --no-cache启动，排除缓存影响。

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