DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 970,177 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Angular : How can we have multiple tsconfig file for angular app?
RajeshKumarYadav.com
RajeshKumarYadav.com

Posted on • Updated on

Angular : How can we have multiple tsconfig file for angular app?

One tsconfig file is enough for your project but if still for some of technical reasons you want to have more than one for example create 2 different tsconfig files (e.g. tsconfig.a.json and tsconfig.b.json) then you need to add a script when building to copy over tsconfig.json with the desired script using extend.

For example:
Refer official documentation

Here you can see :
A tsconfig.json file can inherit configurations from another file using the extends property.

The extends is a top-level property in tsconfig.json (alongside compilerOptions, files, include, and exclude). extends’ value is a string containing a path to another configuration file to inherit from.

The configuration from the base file are loaded first, then overridden by those in the inheriting config file. If a circularity is encountered, we report an error.

files, include and exclude from the inheriting config file overwrite those from the base config file.

All relative paths found in the configuration file will be resolved relative to the configuration file they originated in.

For example:
configs/base.json:


{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}
Enter fullscreen mode Exit fullscreen mode

tsconfig.json:

{
  "extends": "./configs/base",
  "files": [
    "main.ts",
    "supplemental.ts"
  ]
}
Enter fullscreen mode Exit fullscreen mode

tsconfig.nostrictnull.json:

{
  "extends": "./tsconfig",
  "compilerOptions": {
    "strictNullChecks": false
  }
}
Enter fullscreen mode Exit fullscreen mode

If you don't want to use above method then as an alternative you can modify your package.json and it will do the same for you. Let's assume you have appX and appY for appX you want to execute tsconfig.x.json and for appY you have tsconfig.y.json then you can modify you package.json as mentioned below:


{
  build:appX="cp tsconfig.x.json tsconfig.json && npm run build"
  build:appY="cp tsconfig.y.json tsconfig.json && npm run build"
}

Enter fullscreen mode Exit fullscreen mode

Source - DevelopersDiscussion.com

Buy Me A Coffee

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.

Top comments (0)

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!