How to debug a library from an application in Angular v10 with VS Code

Viewed 341

I have created, built and npm published a library called @abc/library.

In my application I declared it in package.json and installed with npm install (I have it now in application node-modules/@abc/library folder).

Everything works fine but now I am looking for a way to debug the library from my application, allowing me to directly access its source code and place breakpoints (in node-module I can access only declarations, located in d.ts files).

Following advices from other threads I tried:

  • Setting npm link on library main folder (npm link) and in application main folder (npm link "@abc/library")
  • Setting sourceMap for scripts, style and vendor to true in application angular.json file:
"build": {
  "options": {
    "sourceMap": {
      "scripts": true,
      "styles": true,
      "vendor": true
     }
  }
}

Unfortunately nothing seems to work for me

Update

I found that after adding sourceMap options in application angular.json file, I'm able to debug the library in Chrome dev tools by following the path:

webpack://.node_modules/@abc/projects/library/src/lib

still though, I cannot debug it directly in Visual Studio Code

0 Answers
Related