I'm new in Angular. I saw sourcemap
in tsconfig.json
and by default it is "sourceMap": true
. I had few doubts and found this link useful. Still I have the following doubt regarding the same.
I set "sourceMap": false
, but couldn't find any change in the app. What will be the actual change if I set so?
Nothing will change in how the app runs.
The change will be in your debugging experience.
Source maps are helpful for debugging code. You write your code in TypeScript, and the compiler turns that source code into JavaScript. When your app is running in a browser like Firefox, the browser is running the JavaScript. Even though the browser is running that JavaScript, if you open the debugger in Firefox, the debugger will display the TypeScript source code and will let you set break points in it. The debugger is able to do that because of source maps, which map the TypeScript source code to the JavaScript runtime code. That is what source maps do: they map the source code to the runtime code to enable source code debugging at runtime.
When the sourceMap
set to false
. the output will be built with out a sourcemap file. And you can't debug with the browser on ts file without that.
sourceMap
is just for development experience (debug) and normally you don't need these files in production build and if you check angular.json you will found that it 's set to false for you
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false, <----
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}