12

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
mzmuda33
  • 123
  • 1
  • 5

2 Answers2

6

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
        },
        ...
     }
}
mor222
  • 400
  • 7
  • 16
4

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/*"
 },
  • 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 Apr 04 '19 at 20:05
  • It might also be worth noting that my library is scoped: @abc/shared-components – mzmuda33 Apr 04 '19 at 20:11
  • Are you serving it with --vendorSourceMap --source-map=true? –  Apr 05 '19 at 07:58
  • So it should be: `..."sourceMapPathOverrides": { "webpack:///ng://<>/lib/*": "C:/dev/git_repo/my-components/projects/abc/shared-components/src/lib/*" }...`. And `<>` as referenced in your `package.json`. I will check with a scoped lib this weekend. –  Apr 05 '19 at 14:50