66

I'm a newbie in Angular. I used angular-cli to learn about angular and I found the files tsconfig.json and tsconfig.app.json. Both of these are typescript related and I found this link useful.

But why two such files has been used? Why can't the configurations in these two files be combined in one file? Please help me figure this out.

kmg
  • 1,195
  • 3
  • 11
  • 14

3 Answers3

41

there is nothing that prevents you from getting rid of the tsconfig.app.json. it's just an additional config file that allows you to adjust your configuration on an app basis. this is e.g. useful when you have multiple apps in the same angular-cli workspace.

you could have the root folder with the tsconfig.json and then a sub folder app-a with a tsconfig.app.json file and another app in the sub-folder app-b with it's own tsconfig.app.json, which contains a variation of the global configuration.

the difference in configuration could e.g. be the output directory outDir or the includes or excludes used.

jahller
  • 2,705
  • 1
  • 28
  • 30
  • 2
    I just excluded tsconfig.app.json file at first and then I got this error `no such file or directory, stat '/home/ggg/Documents/SampleAngularApps/sample-ang-app/src/tsconfig.app.json'`. So I had to include this file. I'm using VSCode as the editor. I'm not sure whether this is the thing which is blocking me. – kmg Feb 27 '19 at 10:16
  • @kmg You need to modify it in `angular.json` too, that's all – CodyBugstein Jul 01 '20 at 05:15
  • 1
    Does `tsconfig.app.json` override `tsconfig.json`? – Bigeyes Nov 13 '20 at 23:58
23

The difference is that tsconfig.app.json is a file that is related to the Angular App in particular, while tsconfig.json is a more general file that contains general typescript configuration. It's especially useful when you have a micro frontends system, where there are multiple Angular subprojects, each of them with its own tsconfig.app.json configuration. But if you want you could perfectly merge these two files into one, actually you surely noticed that tsconfig.app.json contains the line:

  "extends": "./tsconfig.json"

which means that the whole App uses the configuration stated in tsconfig.app.json plus the configuration in tsconfig.json

Danilo Gutiérrez
  • 241
  • 2
  • 4
9

Just want to add one more point.

It seems the tsconfig.app.json(App specific one) will override the tsconfig.json(global one).

My issue was with the types declaration from node not in scope of my Angular project and I was getting compile errors saying Buffer is not found.

I first added the types declaration in tsconfig.json thinking it will take effect in every app. But I had to add it to my app-specific tsconfig.app.json file for it to take effect on my app.

Renju Jose
  • 311
  • 4
  • 6
  • This seems to conflict with fact that tsconfig.app.json **extends** tsconfig.json. Are you sure it wasn't the case that "types" was already defined in both files and it was defined as "[]" in tsconfig.app.json. This would then be the same as defining "sourceMap" as true in one file and false in the other. – John Pankowicz Mar 13 '23 at 20:53