Angular应用热重载时styles.css资源加载路径错误问题求助

你遇到的资源路径异常是静态资源加载基准路径配置错误导致的，具体诱因有两个：

1. 项目src/index.html文件中<base href>标签配置为相对路径（比如./），或缺失该标签
2. angular.json构建配置中未显式声明资源加载根路径，热重载时样式文件的注入逻辑会以当前页面路由作为相对基准路径，js chunk因webpack动态注入逻辑默认走绝对路径所以不受影响

• 第一步：修改src/index.html头部的base标签，确保值为站点根路径：

<head>
  <!-- 原有meta、title等配置保持不变 -->
  <base href="/">
</head>

• 第二步：在angular.json的构建配置中补充基准路径声明，找到projects > nobleui-angular > architect > build > options节点，添加如下两个配置项：

{
  "options": {
    // 原有outputPath、index、main等配置保持不变
    "baseHref": "/",
    "deployUrl": "/",
    // 后续assets、styles、scripts等配置保持不变
  }
}

• 第三步：重启ng serve开发服务，清空浏览器缓存后验证即可，热重载触发后所有资源都会从站点根路径加载。

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