如何在Visual代码中调试Angular 7库

Question

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

我的调试器适用于我通过VS代码运行的应用程序，但我的链接库断点永远不会被命中。

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

以下是我所做的概述：

• Angular 7库内置于dist文件夹中。
• 我在dist文件夹中运行npm link
• 我在我的应用程序中运行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

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

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