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

Question

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
              },

score 1 · Accepted Answer · answered Apr 18 '22 at 19:55

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...

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

1 Answers1