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

Question

How can I debug an Angular multi-project workspace in VSCode using the VS Code - Debugger for Chrome? After the migration to an Angular multi-project workspace, the debugging does not work anymore. I get the following message if I set a breakpoint.

Breakpoint set but not yet bound

I found a blog post about this topic: "Visual Studio Code Breakpoints for Angular Multi-Project Workspace". I added the following to my launch.json, I replaced "webRoot": "${workspaceRoot}"" with "webRoot": "${workspaceFolder}":

{
    "name": "Launch new-app 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": {
        "/./*": "${webRoot}/projects/new-app/*",
        "/src/*": "${webRoot}/projects/new-app/src/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*",
    },
}

I also replaced new-app with the correct app name, but it does still not work.

The folder structure:

Can anyone help me to get this working?

Kubiak

Typically, you only debug one angular application at a time. What is unique about your setup that you can't do this? – Expugnable

@Expugnable I don't understand what you mean with: "Typically, you only debug one angular application at a time." Yes, I want to debug only the app new-app (one application at a time), but there are also other apps. – Kubiak

ng serve runs a server at localhost:4200 by default. If you try to serve up multiple apps, that won't work. So, serve your app, and configure your chrome debugger plugin to connect to localhost:4200. Then it doesn't matter which one you have loaded, the sources will be pulled in automatically. – Expugnable

Unless you're sharing sources across your projects via symlink, in which case open the folder instead of the workspace. At some point, sanity will prevail ;) – Expugnable

@Expugnable "If you try to serve up multiple apps" I do not try that, it only serves one app at a time. In this case the dafault app. angular.io/guide/file-structure#multiple-projects – Kubiak

OK, I see you are not talking about visual studio code workspaces, but angular-specific workspaces. I have no idea why this doesn't work the same way as a singular angular project would work. Are you sure you're setting the compiler to generate source maps (i.e. you're not running a production configuration)? – Expugnable

Also, note- I have not successfully gotten chromium to work out of the box with the plugin yet. So, I can't comment on your specific configuration, but my configuration which looked similar did not work. – Expugnable

Answer 1

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/*",
      },
  }

Kubiak

Wow! I never knew about typing .scripts into the debug console. It really helped a lot!!! – Galligan

Answer 2

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-library
ng 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,
        }
    ]
}

Demonstrable

This solution worked for me. I've been looking at a number of approaches online. This is what fixed it – Sergo

Answer 3

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/*"
    }
}    

Amur