Angular项目Chrome DevTools无法加载SourceMap，如何查看自研.ts文件？

1. 配置Angular编译时排除第三方库的Source Map #

修改项目根目录下的angular.json文件，在对应项目的build配置中，精准排除第三方库的Source Map生成或引用：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          // 其他配置...
          "sourceMap": {
            "scripts": true,
            "styles": true,
            "vendor": false, // 禁用所有第三方依赖的Source Map
            "exclude": [
              "node_modules/ngx-toastr/**",
              "node_modules/ngx-lightning/**"
            ] // 精准排除特定第三方库
          }
        }
      }
    }
  }
}

vendor: false会直接禁用所有第三方依赖的Source Map，exclude则可以更精准地只排除报错的库，按需选择即可。

2. 调整Chrome DevTools设置，跳过第三方脚本的Source Map加载 #

• 打开Chrome DevTools，点击右上角齿轮图标进入设置
• 切换到「Sources」标签页
• 勾选「Enable JavaScript source maps」和「Enable CSS source maps」
• 取消勾选「Load source maps for third-party scripts」

这样Chrome会自动忽略第三方脚本的Source Map请求，专注解析项目自身的main.js.map。

3. 清理缓存并重新编译项目 #

执行以下命令清理旧编译文件并重启项目：

ng clean
ng serve

完成以上步骤后，Chrome DevTools的Sources标签应该就能正常显示项目的原始.ts文件，第三方库的Source Map错误也不会再干扰项目代码的调试。

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