Angular从v9升级到v16后遇样式缺失及调试异常问题

一、index.html 中样式文件无法定位的问题 #

升级后样式找不到，核心是Angular资源解析规则发生了变化，按以下步骤调整：

• 把 index.html 里的绝对路径样式引用改成相对路径，比如原绝对路径改成 <link rel="stylesheet" href="./assets/Styles/glyphicons.min.css">
• 打开 angular.json，确认 architect.build.options.assets 数组里包含你的 assets 目录，示例配置：

  "assets": [
    "src/favicon.ico",
    "src/assets"
  ]
  

  确保构建时会把 assets 目录完整复制到输出目录
• 第三方样式建议直接在 angular.json 的 styles 数组里引入，不要在 index.html 中编写，示例配置：

  "styles": [
    "src/assets/Styles/glyphicons.min.css",
    "src/styles.css"
  ]
  

• 执行 ng clean 清理缓存，再重新启动项目

二、浏览器 Source 标签中 webpack 文件夹不显示的问题 #

这是source map配置或默认规则变化导致的，调整如下：

• 检查 angular.json，确保开发环境的 sourceMap 设为 true，示例配置：

  "configurations": {
    "development": {
      "sourceMap": true,
      "optimization": false,
      "extractLicenses": false,
      "vendorChunk": true,
      "buildOptimizer": false
    }
  }
  

• 打开 tsconfig.json，确认 compilerOptions 里的 sourceMap 是 true，示例配置：

  "compilerOptions": {
    "sourceMap": true
  }
  

• 不要自定义 devtool 为 cheap-module-source-map 这类会隐藏webpack源码的选项，使用Angular16开发环境默认配置即可
• 重启 ng serve，打开浏览器调试工具时勾选「Disable cache」，再刷新页面

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