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?

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