如何在Visual Code中调试Angular 7库 [英] How Do I Debug An Angular 7 Library in Visual Code

问题描述

是否可以使用Visual Studio Code Debugger调试已使用npm link链接的Angular库?特别是，我想知道是否可以将调试器链接到库的TypeScript代码(而不是内置的js代码).

Is it possible to use Visual Studio Code Debugger to debug an Angular Library that has been linked using npm link? Very specifically I am wondering if I can link the debugger to my library's TypeScript Code (not the built js code).

我的调试器对于我在VS Code中运行的应用程序运行良好，但是从未遇到链接库断点.

My debugger works fine for the application I am running through the VS Code, however my linked library breakpoints are never hit.

从我所做的研究中，我相信我理解为什么会发生这种情况(使用该库的应用程序没有源代码，它仅在node_modules中包含已编译的代码)，但是我无法弄清楚或找到有关如何执行此操作的任何详细信息调试.

From the research I have done I believe I understand why this is happening (the app using the library does not have the source, it only has the compiled code within node_modules) however I cannot figure out or find any details on how to debug.

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

Here is an overview of what I have done:

• 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

• Angular 7 library built into dist folder.
• I ran npm link within the dist folder
• I ran npm link @my/test-lib in my application, the library shows up in node_modules and the application is able to use it just fine
• in angular.json: sourceMap is true, preserveSystemlinks is true, aot is false, vendorSourceMap is true
• tsconfig.json sourceMap is true, enableResourceInlining is true
• vscode launch.json has runtimeArgs set to --preserve-symlinks and --preserve-symlinks-main

推荐答案

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

I'm posting just to provide a clearer example to @SyncingDisks solution:

您实际上不需要完整的路径，$ {workspaceFolder}也可以完成此工作:

You actually don't need the full path, ${workspaceFolder} would do the job also:

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

可以与launch.json匹配，如下所示:

which would fit in launch.json as follows:

 {
        "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服务中，这将成为:

Don't forget to add --vendorSourceMap to ng serve which would become:

ng serve --vendorSourceMap

更新:

对于Angular 7及更高版本，更新"angular.json"文件，而不是在"ng serve"中添加"--vendorSourceMap":

for Angular 7 and higher update the "angular.json" file instead of adding "--vendorSourceMap" to "ng serve":

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

这篇关于如何在Visual Code中调试Angular 7库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！