如何在 Visual Code 中调试 Angular 7 库

Question

是否可以使用 Visual Studio Code Debugger 调试已使用 npm link 链接的 Angular 库？非常特别的是，我想知道是否可以将调试器链接到我的库的 TypeScript 代码（不是内置的 js 代码）。

我的调试器适用于我通过 VS Code 运行的应用程序，但是我的链接库断点从未被命中。

从我所做的研究中，我相信我明白为什么会发生这种情况（使用库的应用程序没有源代码，它只有 node_modules 中的编译代码），但是我无法弄清楚或找到有关如何调试的任何详细信息。

以下是我所做的概述：

• Angular 7 库内置在 dist 文件夹中。
• 我npm link在 dist 文件夹中运行
• 我npm link @my/test-lib在我的应用程序中运行，库显示在 node_modules 中，应用程序能够很好地使用它
• 在 angular.json 中：sourceMap 为 true，preserveSystemlinks 为 true，aot 为 false，vendorSourceMap 为 true
• tsconfig.json sourceMap 为true，enableResourceInlining 为true
• vscode launch.json 将 runtimeArgs 设置为 --preserve-symlinks 和 --preserve-symlinks-main

Answer 1

我发布只是为了为@SyncingDisks 解决方案提供一个更清晰的例子：

您实际上不需要完整路径， ${workspaceFolder} 也可以完成这项工作：

"webpack:///ng://angular-reporting/lib/*": "${workspaceFolder}/projects/angular-reporting/src/lib/*"

这将适合 launch.json 如下：

 {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}",
        "sourceMapPathOverrides": {
            "webpack:///ng://angular-reporting/lib/*": "${workspaceFolder}/projects/angular-reporting/src/lib/*"
        },
}

不要忘记添加--vendorSourceMap到 ng serve 将成为：

ng serve --vendorSourceMap

更新：

对于 Angular 7 及更高版本，更新“angular.json”文件而不是将“--vendorSourceMap”添加到“ng serve”：

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "sourceMap": {
          "scripts": true,
          "styles": true,
          "vendor": true
        },
        ...
     }
}

Answer 2

根据.json文件微调你的launch.json sourceMapPathOverrides。摘自我的：

"sourceMapPathOverrides": {
     "webpack:///ng://<<your-awesome-lib>>/lib/*": "C:/<<full path to your library wrapper app>>/projects/<<your-awesome-lib>>/src/lib/*"
 },