如何在可视代码中调试 Angular 7 库

Question

是否可以使用 Visual Studio 代码调试器调试已使用 npm link link 编辑的 Angular 库？非常具体地说，我想知道我是否可以 link 调试器到我的库的 TypeScript 代码（不是内置的 js 代码）。

我的调试器在我运行通过 VS Code 的应用程序中工作正常，但是我的 linked 库断点从未命中。

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

以下是我所做工作的概述：

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

Answer 1

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

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

Answer 2

我发帖只是为了向@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
        },
        ...
     }
}

如何在可视代码中调试 Angular 7 库

How Do I Debug An Angular 7 Library in Visual Code

node.js

angular

debugging

visual-studio-code

angular-library