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

user_3253156 0
Viewed 11592

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?

angular debugging
5 Answers

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.

user_5930310

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
user_175526330

This problem comes when we upgrade angular from angular 11 to above versions. We need to add two configuration in angular.json file.

  1. architect > build > configurations > development

  2. architect > build > serve > configurations > development

     "architect": {
 "build": {
   "builder": "@angular-devkit/build-angular:browser",
   "options": {
     ...
   },
   "configurations": {
     "production": {
       "fileReplacements": [
         {
           "replace": "src/environments/environment.ts",
           "with": "src/environments/environment.prod.ts"
         }
       ],
       "optimization": true,
       "outputHashing": "all",
       "sourceMap": false,
       "namedChunks": false,
       "aot": true,
       "extractLicenses": true,
       "vendorChunk": false,
       "buildOptimizer": true,
       "budgets": [
         {
           "type": "initial",
           "maximumWarning": "2mb",
           "maximumError": "5mb"
         },
         {
           "type": "anyComponentStyle",
           "maximumWarning": "6kb"
         }
       ]
     },
     "development": {
       "optimization": false,
       "sourceMap": true
     }
   }
 },
 "serve": {
   "builder": "@angular-devkit/build-angular:dev-server",
   "options": {
     "browserTarget": "app-name:build"
   },
   "configurations": {
     "production": {
       "browserTarget": "app-name:build:production"
     },
     "development": {
       "browserTarget": "app-name:build:development"
     }
   },
   "defaultConfiguration": "development"
 }

    }

user_39505870

I encountered this problem with one Angular 13 project, but not with a different one. It turned out, that debugging doesn't work on localhost, but it does work when using any other host.

I had become suspicious when I switched to the "Scripts" tab of the Debug window of "Angular Application", and when I clicked on one of the files, e.g. runtime.js, I would get a Connection refused message:

enter image description here

The solution was to

  1. set up a domain name, mapping e.g. "some.lan" to 127.0.0.1. For this, you can either use your local hosts file (on Unix, that would be /etc/hosts), or set it up on your DNS server
  2. edit the "Angular CLI Server" run configuration to use the Arguments -- --host some.lan (please don't skip the additional -- at the beginning!)
  3. edit the "Angular Application" run configuration to use the URL "http://some.lan:4200"

Then, as usual, first run Angular CLI server (wait until it is fully loaded), then debug Angular Application.

user_2917410

By adding it to the angular.json file for the development configuration I was able to get the debugging work for the Angular 12 version.

 "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "configurations": {
        "production": {
          "browserTarget": "app-name:build:production"
        },
        "development": {
          "browserTarget": "app-name:build:development",
          "sourceMap": true,
          "optimization": false
        },
        "test": {
          "browserTarget": "app-name:build:test"
        }
      },
      "defaultConfiguration": "development"
    }
user_63569580
Related