Angular13 VS Code调试总是中断到main.js源码映射异常

这个问题的核心原因是配置错误导致sourcemap映射失效，调试器无法把webpack打包后的bundle代码对应到你本地的TS/组件模板源码，才会显示不存在的main.js文件。

1. 修复angular.json配置错误 #

你的angular.json里存在两处影响sourcemap生成的问题：

• serve配置的browserTarget存在项目名笔误，原配置写的是app:build，但你的实际项目名是MyApp，会导致开发服务加载错误的构建配置
• development构建环境的sourcemap配置不完整，无法正确映射模板编译代码

修改点1：修正serve节点配置 #

找到projects -> MyApp -> architect -> serve节点，替换为以下内容：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "MyApp:build:development"
  },
  "configurations": {
    "production": {
      "browserTarget": "MyApp:build:production"
    },
    "development": {
      "browserTarget": "MyApp:build:development"
    }
  },
  "defaultConfiguration": "development"
}

修改点2：补全development环境的sourcemap配置 #

找到projects -> MyApp -> architect -> build -> configurations -> development节点，新增sourceMap的详细配置：

"development": {
  "buildOptimizer": false,
  "optimization": false,
  "vendorChunk": true,
  "extractLicenses": false,
  "sourceMap": {
    "scripts": true,
    "styles": true,
    "vendor": true
  },
  "namedChunks": true
}

2. 替换launch.json调试配置 #

你当前的launch.json存在两个问题：旧版chrome类型调试器已经被VS Code弃用，sourcemap路径映射规则不匹配Angular 13的webpack打包规则，且没有跳过Angular框架编译生成的内部代码。
直接删除原有所有配置，替换为以下内容：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "启动Angular调试",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "skipFiles": [
        "<node_internals>/**/*.js",
        "${workspaceFolder}/node_modules/**/*.js",
        "${workspaceFolder}/node_modules/**/*.mjs",
        "${workspaceFolder}/**/*.js",
        "webpack:///./node_modules/**",
        "webpack://@angular/**"
      ],
      "sourceMapPathOverrides": {
        "webpack://MyApp/*": "${webRoot}/*",
        "webpack:///.*": "${webRoot}/*",
        "webpack:///(.*)": "${webRoot}/$1"
      },
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        "!**/node_modules/**"
      ]
    }
  ]
}

3. 清缓存验证 #

注意：配置修改后必须按以下顺序操作，否则旧缓存会导致配置不生效

• 停掉当前所有运行中的ng serve进程
• 删除项目根目录下的.angular缓存文件夹
• 关闭所有已经打开的Chrome调试实例窗口
• 重新执行ng serve启动开发服务，等服务完全启动后再按F5启动VS Code调试

配置生效后，你看到的AppComponent_div_0_Template这类Angular编译生成的模板函数，会自动映射回你本地对应的.ts和.html源码文件，不会再中断到虚拟的main.js位置。

如果仍有异常，可以检查是否有Chrome扩展干扰调试，上述pwa-chrome配置默认会启动独立的Chrome调试实例，不会加载你日常使用的浏览器扩展，能避免大部分第三方扩展导致的sourcemap映射问题。

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