How Do I Debug An Angular 7 Library in Visual Code

Question

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).

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

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 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

mor222 · Accepted Answer · 2019-09-24 13:42:02Z

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

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/*"

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/*"
        },
}

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

ng serve --vendorSourceMap

Update:

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
        },
        ...
     }
}

score 5 · Accepted Answer · 2019-04-03 13:31:24Z

5

Fine tune your launch.json based on the sourceMapPathOverrides. Excerpt from mine:

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

edited Apr 3, 2019 at 13:31

answered Apr 3, 2019 at 13:19

user3193330

4 Comments

mzmuda33 Over a year ago

I tried various combinations of paths to try and get the debugger working and it still does not seem to work for the library. I am not sure what I am missing. The library I want to link debugger to: C:\dev\git_repo\my-components\projects\abc\shared-components C:\dev\git_repo\my-components\projects\abc\shared-components\src (with public_api.ts) C:\dev\git_repo\my-components\projects\abc\shared-components\src\lib (the html/ts files) Consuming App: C:\dev\git_repo\my-experience\my-ui-application C:\dev\git_repo\my-experience\my-ui-application\.vscode\launch.json

mzmuda33 Over a year ago

It might also be worth noting that my library is scoped: @abc/shared-components

user3193330 Over a year ago

Are you serving it with --vendorSourceMap --source-map=true?

user3193330 Over a year ago

So it should be:

..."sourceMapPathOverrides": {      "webpack:///ng://<<your-awesome-lib>>/lib/*": "C:/dev/git_repo/my-components/projects/abc/shared-components/src/lib/*"  }...

. And <<your-awesome-lib>> as referenced in your package.json. I will check with a scoped lib this weekend.

Collectives™ on Stack Overflow

How Do I Debug An Angular 7 Library in Visual Code

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related