Angular 9升级至16后样式表无法定位警告问题求助

问题根源 #

Angular 16配套的webpack-dev-server在解析index.html中的资源链接时，逻辑和旧版本不同：它会直接从项目根目录查找资源文件，而你的样式实际存在于src/assets下，所以会报找不到的警告。但实际样式能生效，是因为dev server已经把src/assets映射到了运行时的/assets路径，页面能正确加载到资源，只是dev server的文件检测逻辑和实际资源映射路径不一致导致的误报。

当你尝试在链接里加src时，虽然dev server能找到文件，但运行时页面请求的是/src/assets/...，而构建后的输出目录里并没有src文件夹，所以样式反而失效了。

解决方法 #

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

去掉链接开头的./，使用基于base href="/"的绝对路径：

<head>
  <!-- snip -->
  <base href="/">
  <link rel="stylesheet" type="text/css" href="/assets/css/googleFont.css">
  <link rel="stylesheet" type="text/css" href="/assets/css/blueprint-ui.css">
  <link rel="stylesheet" type="text/css" href="/assets/fonts/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="/assets/fonts/css/fm-icon-font.css" />
</head>

这样dev server会通过资源映射找到src/assets下的文件，同时运行时页面也能正确请求到资源，警告会消失。

方法2：通过angular.json配置管理样式表 #

把这些样式文件添加到angular.json的styles数组中，让Angular构建工具统一处理：

1. 打开项目根目录下的angular.json
2. 找到projects.你的项目名.architect.build.options.styles节点
3. 添加样式文件的路径：

"styles": [
  "src/styles.css",
  "src/assets/css/googleFont.css",
  "src/assets/css/blueprint-ui.css",
  "src/assets/fonts/css/font-awesome.min.css",
  "src/assets/fonts/css/fm-icon-font.css"
]

4. 移除index.html中的对应<link>标签
   这种方式更符合Angular的官方规范，构建工具会自动处理资源的打包和路径映射，彻底避免这类警告。

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