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?

Nonessential

You are not missing anything - the angular framework is missing adequate guidance.... – Pinite

you are right the documentation needs an upgrade. – Nonessential

Answer 1

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

Stylus

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! – Pinite

Thank you so much. I have changed my nx config with your answer. Everything is perfect right now. – Teledu

Where does the "development" go inside the angular.json? – Clippard

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? – Brawl

Following this https://mcmap.net/q/275615/-ng-serve-command-show-an-error-first-and-in-last-compiled-successfully still does not fix my issue – Brawl

this works well for me 😁😁😁😁 – Penetralia

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 – Clump

Answer 2

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.

Belligerency

The above solution worked as well. thanks for coperation – Nonessential

Solution worked for ionic 6 project too. Thanks – Coke

Answer 3

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.

Partible

this worked for my ng build --watch. nice – Normalcy

Answer 4

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.

Horace

Answer 5

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
}

Beverie

Answer 6

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

Chacma

Throws the following errors, Invalid tag name "—-from=11", Invalid tag name "—-migrate-only" – Dematerialize