Angular 12 Debug source code not available in Chrome Developer tools was fine in Angular 11

Question

I have 2 similar projects on 2 different laptops. The first project is written with Angular 11 and debugs fine with WebPack cloud icons in the source tab of developer tools showing so I can locate the source code and set breakpoints...

The 2nd project written with Angular 12.0.1 does not show any WebPack icons. I have read other similar questions and it looks like the angular.json has all the correct settings for development (e.g. sourceMap true, optimization false, defaultConfiguration development...) but it still looks like a production build in Chrome's development tools.

I've also tried doing an ng serve --configuration development

but still no luck. Is there something I'm missing so I can debug the V12 project?

Answer 1

I had the same problem and found that I had to add sourceMap and optimization entries to the development configuration.

 "configurations": {
        "development":{
          "sourceMap": true,
          "optimization": false
        },
        "production": {

Build using: ng build --configuration development

and it now works for me.

Answer 2

I had the same problem after updating an Angular 11 app to Angular 12 (and then to 13). I use ng serve to debug my angular code.

Therefore I had to add

"development": {
  "browserTarget": "<App-Name>:build:development"
}

under "serve" / "configurations" beside the production configuration in angular.json.

Now I can debug with

ng serve --configuration development