Angular 12 source map is missing in browser

Question

We have upgraded to Angular 12 recently and facing a problem wherein the browser Source Map is missing and due to this we are unable to debug our component files as there aren't any. Can anyone suggest what I am missing?

You are not missing anything - the angular framework is missing adequate guidance.... — Combine, Sep 05 '21 at 08:46

score 116 · Accepted Answer · edited Jun 27 '21 at 18:47

116

Angular 12 changed the default "ng build" to use the "production" configuration. You want "sourceMap" so try adding a "development" config in your angular.json like this

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

Target with either "ng build -c development", or change your default configuration for "ng serve" eg.

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "app:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "app:build:production"
    },
    "development": {
      "browserTarget": "app:build:development"
    }
  },
  "defaultConfiguration": "development"
},

edited Jun 27 '21 at 18:47

SwissCodeMen

4,222
8
24
34

answered May 26 '21 at 08:31

colche

1,184
1
7
2

2

Thank you! You save many hairs on my head. Seriously this was getting on my nerves and frankly - the angular documentation is ... it needs information like this comment. It is sad when there is more information in stackoverflow rather than the official docs in their webside. Thank you again! – Combine Sep 05 '21 at 08:45
Thank you so much. I have changed my nx config with your answer. Everything is perfect right now. – eyupaltindal Oct 21 '21 at 20:07
2

Where does the "development" go inside the angular.json? – DevEng Nov 07 '21 at 20:04
2

I have done that but it's weird because I still get the same result. I am on Angular 13 and I'm struggling to get the sourceMaps in order to debug. Anyone has had the issue on the latest Angular? – Carlos Torrecillas Dec 02 '21 at 14:05
Following this https://stackoverflow.com/a/70101571/5293466 still does not fix my issue – Carlos Torrecillas Dec 02 '21 at 14:13
this works well for me – C Alonso C Ortega Feb 13 '22 at 06:10
Thank you VERY much! I spent days to figure out why migrating from Angular 11 to 13 made the "webpack" folder disappear in the browser. I knew my problems would surely be fixed by some simple statement, now I know which one :-D – rawcode Jun 29 '22 at 08:26

score 6 · Answer 2 · answered May 26 '21 at 08:18

6

Please add: "sourceMap":true and "optimization":false under architect -> build-> options in your angular.json.

Do not forget to set these for your production configurations the other way around.

answered May 26 '21 at 08:18

István Herbák

69
3

The above solution worked as well. thanks for coperation – ammad khan May 26 '21 at 09:59
Solution worked for ionic 6 project too. Thanks – zulkarnain shah Sep 02 '22 at 08:12

score 1 · Answer 3 · answered Jan 30 '22 at 06:47

1

After following @colche answear still i was unable to generate source map, after finding few minuses, I got solution:

ng build --prod --source-map

You have to build with source map.

answered Jan 30 '22 at 06:47

MD Ashik

9,117
10
52
59

score 1 · Answer 4 · answered May 19 '22 at 06:20

If you are using Nx workspace, you need to edit the workspace.json file to add development settings to build:configurations like this:

"build": {
      ...
      "configurations": {
        ...
        "development": {
          "buildOptimizer": false,
          "optimization": false,
          "vendorChunk": true,
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true
        }
      },
      "defaultConfiguration": "production"
    }

and add development under serve:configurations like this and set the defaultConfiguration to development:

     "serve": {
      ...
      "configurations": {
        ...
        "development": {
          "browserTarget": "gt:build:development"
        }
      },
      "defaultConfiguration": "development"
    },

this way serve will always serve in development mode and build will always build in production mode.

score 0 · Answer 5 · edited Sep 23 '22 at 07:29

0

Using Prod mode use below code inside the configurations.

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

Using Dev mode use below code inside the configurations.

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

edited Sep 23 '22 at 07:29

E_net4

27,810
13
101
139

answered Sep 19 '22 at 09:51

Mr.White

1
1

score -1 · Answer 6 · answered Jul 12 '21 at 07:45

-1

You can run the below command to update the angular cli. Hope it will fix the issue.

ng update @angular/cli@latest —-from=11 —-migrate-only

answered Jul 12 '21 at 07:45

Priyanka Gawade

7
1

1

Throws the following errors, Invalid tag name "—-from=11", Invalid tag name "—-migrate-only" – lostintranslation Oct 01 '21 at 15:48

Angular 12 source map is missing in browser

6 Answers6

Linked

Related