Menu
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?
256
To enable source maps in Google Chrome, go to Developer Tools, click the little cog icon, and then make sure that “Enable Javascript source maps” is checked. That's it.
At its core, a source map is a JSON file that contains all the necessary information to map the transpiled code back to the original sources. Pretty cool! Technically a source map is just a JSON file that contains the following fields: version: indicates the source map spec version.
Explanation: TypeScript Map files are source map files that let tools map between the emitted JavaScript code and the TypeScript source files that created it. And these Source Map files will then help to debug the Typescript file instead of debugging the emitted JavaScript file.
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" }, 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.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
