CODEWITHSUNDEEP
angulartypescriptangular12
ammad khan
ammad khan

Reputation: 1154

Angular 12 source map is missing in browser

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?

Upvotes: 73

Views: 39541

Answers (6)

Mr.White
Mr.White

Reputation: 11

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
}

Upvotes: 1

Srikanth Reddy
Srikanth Reddy

Reputation: 56

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.

Upvotes: 1

MD Ashik
MD Ashik

Reputation: 9835

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.

Upvotes: 3

Priyanka Gawade
Priyanka Gawade

Reputation: 7

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

Upvotes: -1

colche
colche

Reputation: 1354

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

Upvotes: 123

István Herbák
István Herbák

Reputation: 99

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.

Upvotes: 9

Related Questions