How to debug Angular library in Ionic App in VSCode

Viewed 210

I have a Ionic App which imports an Angular Library. The library is located in ./Apps/AngularLib, which is an Angular Project but only has the library (in ./Apps/AngularLib/projects/my-lib). My Ionic App is located in ./Apps/IonicApp and imports the library.

What I want is, that I can set breakpoints in the library files in VSCode while debugging my Ionic App. I updated my launch.json to the following (${workspaceFolder} is ./Apps/):

{
"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "Debug Ionic App",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}/IonicApp",
        "sourceMapPathOverrides": {
            "webpack:///ng://my-lib/lib/*": "${workspaceFolder}/AngularLib/projects/my-lib/lib/*"
        }
    }
]}

At the moment I can only set breakpoints for my Ionic App in VSCode. These breakpoints will be hit and I can debug in VSCode. Breakpoints for my angular lib will be unbound and not hit. If I set these breakpoints in the Chrome DevTools, they will be hit and VSCode opens the corresponding Typescript file.

Versions (for both lib and app):

Ionic CLI                     : 6.12.1
Ionic Framework               : @ionic/angular 5.3.1
@angular-devkit/build-angular : 0.901.12
@angular-devkit/schematics    : 9.1.12
@angular/cli                  : 9.1.12
@ionic/angular-toolkit        : 2.3.3
0 Answers
Related