What will happen if sourcemap is set as false in Angular

Question

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?

Answer 1

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.

Answer 2

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
    }