node.js - 如何在可视代码中调试 Angular 7 库

Question

是否可以使用 Visual Studio Code Debugger 调试已使用 npm link 链接的 Angular 库？非常具体地说，我想知道我是否可以将调试器链接到我的库的 TypeScript 代码(而不是内置的 js 代码)。

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

根据我所做的研究，我相信我明白为什么会这样(使用该库的应用程序没有源代码，它只有 node_modules 中的编译代码)但是我无法弄清楚或找到有关如何调试。

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

• dist 文件夹中内置的 Angular 7 库。
• 我在 dist 文件夹中运行了 npm link
• 我在我的应用程序中运行了 npm link @my/test-lib，该库出现在 node_modules 中并且应用程序能够正常使用它
• 在angular.json中:sourceMap为真，preserveSystemlinks为真，aot为假，vendorSourceMap为真
• tsconfig.json sourceMap为真，enableResourceInlining为真
• 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
        },
        ...
     }
}