Debug Angular build in Visual Studio Code

Question

Since I'm developing a PWA app with angular, I use a watched build that always rebuilds my code if I change anything:

ng build --output-path dist --watch

That works fine.

I can also run a lite-server via command line to run the build results from the dist-folder:

lite-server

As result, I can see the built app on localhost:3000

But I don't have any debugging from my Visual Studio Code. If I extend the launch.json with a configuration that launched the server:

{
    "name": "Launch via NPM",
    "type": "node",
    "request": "launch",
    "cwd": "${workspaceRoot}",
    "runtimeExecutable": "npm",
    "runtimeArgs": [
        "run-script", "runServer"
    ]
}

where runServer is a script in my package.json just containing "lite-server". I can select and run this configuration. It starts the server and opens even the browser. But there is still no debugging in Visual Studio Code like stopping on breakpoints.

I'm wondering, if this possible at all: To build the angular code in a dist-folder and not just "serve" it with ng serve. Using ng serve and the default chrome launch configuraiton in VSC works well for debugging Angular. But then I do not have the PWA capabilities.

But maybe someone has an idea that works.

Answer 1

The solution is to run the ng build development configuration:

ng build --output-path dist --watch --configuration development

Where development is the default one defined in angular.json:

 "development": {
          "buildOptimizer": false,
          "optimization": false,
          "vendorChunk": true,
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true
        }

The key is sourceMap - in this constellation, the PWA can be debugged in Visual Studio Code with no changes at launch.json in comparison to the non-pwa ng serve scenario.