如何在VSCode中同时调试Angular 16应用与自定义库的断点？

核心配置方案 #

修改VSCode的launch.json，针对应用和库的webpack source map路径分别设置映射，避免全局覆盖：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "调试应用与自定义库",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}", // 对应你的root根目录
      "sourceMapPathOverrides": {
        // 映射Angular应用的webpack路径到本地文件
        "webpack://my-app/*": "${webRoot}/my-app/*",
        // 映射自定义库的webpack路径到本地文件（替换my-lib为你的库名）
        "webpack://my-lib/*": "${webRoot}/lib/projects/my-lib/*"
      }
    }
  ]
}

必要的前置配置 #

1. 确保库生成正确的Source Map
   编辑lib/projects/my-lib/ng-package.json，开启source map并启用监听：

   {
     "dest": "../../dist/my-lib",
     "lib": {
       "entryFile": "src/public-api.ts"
     },
     "sourceMap": true,
     "watch": true
   }
   

2. 同时启动开发服务与库监听构建

   • 在my-app目录下执行：ng serve
   • 在lib目录下执行：ng build my-lib --watch

问题原因说明 #

之前的全局webpack:/*覆盖会导致所有source map路径只能映射到应用或库其中一方。Angular构建时，应用的source map前缀为webpack://my-app/，自定义库的前缀为webpack://my-lib/，通过分别匹配这两个前缀，就能让VSCode同时找到应用和库的本地源码，断点即可同时生效。

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