16

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?

user3253156
  • 381
  • 1
  • 2
  • 10
  • See this extension and its configuration here: https://stackoverflow.com/a/69916159/3025289 –  Jun 17 '22 at 08:16

6 Answers6

30

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.

Declan
  • 499
  • 4
  • 10
  • I ended up debugging with VSCode instead of just Chrome as a workaround. Looking at your answer I probably had problems because I was just doing an ng serve --configuration... not ng build --configuration.. Thanks – user3253156 Jun 26 '21 at 15:24
  • 3
    for more clarity, this configuration should be added in 'angular.json' file under respective serv or build sections. Also is there any other changes to be made in tsconfig.json too? – Raja Nagendra Kumar Oct 13 '21 at 18:15
  • This solutions worked for me, I used it for my ng-serve with version 12.2.15. Thanks Declan. – Oussama Dinia Dec 29 '21 at 23:36
  • This does indeed work, but I'm curious why I need to use "--configuration development", since I added all the sourceMap: true, optimization: false to the production config, and everything else looks the same in the production config, so why doesn't it work for regular "ng serve" ? – xpusostomos Apr 01 '22 at 03:55
5

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
Philipp Schmid
  • 51
  • 1
  • 2
5

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

    }

Shailesh Vikram Singh
  • 1,433
  • 17
  • 26
0

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.

Chris Lercher
  • 37,264
  • 20
  • 99
  • 131
0

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"
    }
loakesh bachhu
  • 323
  • 3
  • 4
0

I had the same problem and I resolved it this way.

Add the following configuration inside the angular.json file to your development configuration if the development configuration doesn't exist create one, this is the file which is used for configuring angular for the project you are working on.

"development": {
          "buildOptimizer": false,
          "sourceMap": true }

You may leave the rest of the configuration as it is.

Besides this, at the bottom add

"defaultConfiguration": "development"

By default using the ng serve will use the development configuration only, but if you have already specified the default configuration as anything else that would be taken as the configuration.

Then you may serve your application using ng serve and you will have access to your source files

Prajval Singh
  • 501
  • 3
  • 9