How can I debug an Angular multi-project workspace in Visual Studio Code

I get this working by using the .scripts command to find out the correct paths for the sourceMapPathOverrides property.

    {      "name": "Launch editor in Chrome against localhost (with sourcemaps)",      "type": "chrome",      "request": "launch",      "runtimeExecutable": "/usr/bin/chromium-browser",      "runtimeArgs": [        "--disable-extensions"      ],      "url": "http://localhost:4200",      "webRoot": "${workspaceFolder}",      "sourceMaps": true,      "sourceMapPathOverrides": {          "webpack:/*": "${webRoot}/projects/apps/editor/*",          "webpack:///./src/*": "${webRoot}/projects/apps/editor/src/*",          "/*": "*",          "/./~/*": "${webRoot}/node_modules/*",      },  }

i'm using angular 10 workspace with app & library, and i was having trouble setting breakpoints in my library.

i needed to tell "ng serve" to include vendor sourcemaps...

add a "sourceMap" object to your "angular.json" under projects / "my-app" / architect / "serve" / options:

        "serve": {          "builder": "@angular-devkit/build-angular:dev-server",          "options": {            "browserTarget": "app:build",            "sourceMap": {              "scripts": true,              "styles": true,              "vendor": true            }          },

ng build my-libraryng serve my-app

launch.json:

{    // Use IntelliSense to learn about possible attributes.    // Hover to view descriptions of existing attributes.    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387    "version": "0.2.0",    "configurations": [        {            "type": "chrome",            "request": "launch",            "name": "my-app",            "url": "http://localhost:4200",             "webRoot": "${workspaceFolder}/projects/my-app",            "sourceMaps": true,        }    ]}

In my case multi-project workspace with Angular 9 (so with Ivy and AOT) I had to set webroot to location where I have bundled scripts (with *.js.map files) so it was: "webRoot": "${workspaceFolder}/MyWebProj/wwwroot".

And thanks to that .scripts was able to list all files with invalid path.

So after that I had to just simply adjust paths in sourceMapPathOverrides. Paths should be relative to webroot.

{    "name": "App Debug",    "type": "chrome",    "request": "launch",    "url": "http://localhost:50120/",    "webRoot": "${workspaceFolder}/MyWebProj/wwwroot",    "sourceMaps": true,    "sourceMapPathOverrides": {        "webpack:///./src/*": "${webRoot}/../src/*",        "webpack:///../CommonWeb/*": "${webRoot}/../../CommonWeb/*",        "webpack:///../node_modules/*": "${webRoot}/../../node_modules/*"    }}