Debug (vscode) typescript file in angular (chrome) that exists outside of angular project

I have 2 folders in my repo:

./shared-lib (shared typescript files)

./web (angular project)

Inside my angular tsconfig.json, i reference the shared-lib project and use a file from there. Everything builds and works great. I wish to debug files in the shared library, however.

In my vscode, I have a launch file:

    {
      "type": "chrome",
      "request": "attach",
      "name": "Web",
      "port": 9222,
      "webRoot": "${workspaceFolder}/web"
    }

For regular angular code, this all debugs perfectly fine. I can breakpoint the line that calls out to my shared lib. However, when I step INTO the shared lib files, it complains that it cannot find the file. In chrome, i can do this fine. I assume this is as the debug files aren't mapped.

This is where my problem lies. Angular webpack seems to compile it one directory up from the root webpack directory.

enter image description here

I assumed that I could tell vscode about this:


    {
      "type": "chrome",
      "request": "attach",
      "name": "Web",
      "port": 9222,
      "pathMapping": {
        "../shared-lib": "${workspaceFolder}/shared-lib"
      },
      "webRoot": "${workspaceFolder}/web"
    }

But sadly, the breakpoints do not attach. How can I point vscode's debugger to the right files on the web server?