Angular 13升级后部分文件无源码映射，请求技术排查

1. 检查 Webpack 配置细节 #

• 确认自定义 Webpack 配置中devtool选项设置正确，Angular 13 开发环境默认使用eval-source-map，如果被自定义配置覆盖会导致源码映射异常：

  module.exports = {
    devtool: 'eval-source-map',
    // 其他配置...
  };
  

• 排查是否在开发环境意外开启了代码压缩，TerserPlugin等压缩插件会破坏 sourceMap，开发环境需关闭：

  optimization: {
    minimize: false,
  }
  

2. 验证 Angular 构建配置完整性 #

• 确保angular.json中build和serve的sourceMap配置完整开启，不要遗漏子字段：

  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "configurations": {
            "development": {
              "sourceMap": {
                "scripts": true,
                "styles": true,
                "vendor": true
              }
            }
          }
        },
        "serve": {
          "configurations": {
            "development": {
              "sourceMap": true
            }
          }
        }
      }
    }
  }
  

• 执行ng serve --configuration development明确指定开发环境构建，避免默认配置被覆盖。

3. 清理缓存并重建 #

• 删除项目根目录下的.angular/cache文件夹，清除 CLI 构建缓存
• 执行ng clean（Angular CLI 13+ 支持）后重新启动服务
• 在 Chrome DevTools 设置中勾选Disable cache (while DevTools is open)，刷新页面避免浏览器缓存旧的 sourceMap

4. 检查 TS 配置与文件规则 #

• 确认tsconfig.json中compilerOptions.sourceMap为true，同时排查exclude字段是否误排除了需调试的文件：

  {
    "compilerOptions": {
      "sourceMap": true
    },
    "exclude": [
      "node_modules"
    ]
  }
  

• 检查tsconfig.app.json等子配置文件，确保未覆盖主配置的sourceMap设置。

5. 调试 Chrome DevTools 自身配置 #

• 在 Sources 面板中展开webpack:// -> . -> src目录，确认正常显示的文件和异常文件的差异，定位构建流程问题
• 检查 DevTools 设置中是否开启了Enable JavaScript source maps和Enable CSS source maps选项

6. 排查插件与依赖冲突 #

• 暂时禁用自定义 Webpack 插件（如angular-builders/custom-webpack），重启服务验证是否恢复正常，逐步定位冲突插件
• 执行npm update更新所有依赖到 Angular 13 兼容版本，排查依赖版本不兼容导致的 sourceMap 生成异常

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