如何在VS Code中调试Angular 6子项目？

你遇到的核心问题是调试器无法正确映射子项目的源文件路径——主项目代码在根目录src下，而子项目代码通常位于projects/mySubProject/src，默认的webRoot指向根目录，导致调试器找不到子项目的源文件映射，断点自然无法命中。

下面是具体的配置修改方案：

步骤1：修改launch.json配置 #

打开.vscode/launch.json，替换原配置为针对子项目的调试配置：

{
  "name": "Launch Chrome (mySubProject)",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:4200/", // 如果子项目启动时指定了其他端口，这里要同步修改
  "webRoot": "${workspaceFolder}/projects/mySubProject/src",
  "sourceMapPathOverrides": {
    "webpack:///./src/*": "${webRoot}/*"
  }
}

关键配置说明： #

• webRoot：明确指向子项目的src目录，让调试器精准定位到子项目的源文件位置
• sourceMapPathOverrides：强制将Webpack编译生成的source map路径，映射到本地子项目的src目录，确保断点能正确关联到本地代码

步骤2：验证调试流程 #

1. 先启动子项目：执行ng serve mySubProject（如果启动时用了--port参数指定端口，记得同步修改launch.json里的url端口）
2. 在VS Code的调试面板中选择你新建的Launch Chrome (mySubProject)配置
3. 启动调试后设置断点测试，此时断点应该能正常命中了

额外提示 #

如果你的子项目结构和默认CLI生成的不同（比如自定义了路径），只需要调整webRoot为子项目实际的src目录路径即可。

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