'Cannot debug in chrome dev tool when setting on "optimization": true in angular.json

When i set optimizations = true in angular.json, we encounter issues while debugging in chrome devtools and Breakpoints aren't hit , or on the wrong line(s) in the corresponding typescript files.

  "local": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": {
                "scripts": true,
                "styles": true,
                "hidden": false,
                "vendor": false
              },
angulardebugginggoogle-chrome-devtools


Solution 1:[1]

I take it this is an Angular 12 project? There's similar questions, but with slightly different wording, so they aren't easy to find...like Angular 12 Debug source code not available in Chrome Developer tools was fine in Angular 11

Essentially you need, as you likely discovered, your angular.json config options to be updated. In a location such as architect -> someNamedBuilder -> configurations -> development or just at the level of architect -> someNamedBuilder under options:

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

Without this configuration, it seems that you are not able to stop at breakpoints within chrome dev tools.

Some of the documentation is here: https://angular.io/guide/workspace-config but it doesn't help much with this issue...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Danny

Related Questions