32

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?

kmg
  • 1,195
  • 3
  • 11
  • 14

4 Answers4

66

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.

Shaun Luttin
  • 133,272
  • 81
  • 405
  • 467
  • this what absolutely what i was looking for. But one more question is Angular 12 is running on production mode by default and because of this, I am also not able to debug. i am unable to find the configuration to set it to development mode so, I may debug. Can you suggest what can I do solve it. – ammad khan May 20 '21 at 07:27
  • You can use ng serve -o command for debugging your angular app before running ng build command. @ammadkhan – Developer Jul 02 '21 at 08:22
6

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
    }
Muhammed Albarmavi
  • 23,240
  • 8
  • 66
  • 91
4

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.

Quy Truong
  • 413
  • 3
  • 9
0

sourcemap property enhances your debugging experience, even though the browser can't be able to understand typescript it manages to map your typescript code to javascript code. if in case we need to disable it we need to modify in angular.json file

{
  "sourceMap": false, -- modify this attribute
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
}
Ajay Ganesh04
  • 21
  • 2
  • Welcome to SO! Please take a look at the other answers that were given before. Your approach is mentioned there already. In order to keep the site clear and make it easy to find answers, we try to avoid double answers. – ahuemmer Dec 26 '22 at 09:21