In the Angular4 Webpack Starter, does tsconfig.webpack.json work for webpack while tsconfig.json works for everything else?

Question

Please refer to this git repository: https://github.com/AngularClass/angular-starter

The Angular4 Webpack Starter comes with 2 files:

tsconfig.json

and

tsconfig.webpack.json

Each file has slightly different configurations for TypeScript.

My question is regarding how these 2 files work in relation to the project.

Will the tsconfig.webpack.json only be applied to the ts-loader used by Webpack? while the tsconfig.json file will apply to everything else?

Any information on what tsconfig.webpack.json would be greatly appreciated.

Answer 1

The short answer is yes. The TypeScript loader registered with Webpack is explicitly configured to use the tsconfig.webpack.json file. This can be observed on line 133 of the common configuration. The tsconfig.json file is there for IDE support.

It is worth noting that, while you state that the template uses ts-loader, it actually uses awesome-typescript-loader.

Having said that, both loaders will by default try to pick up a file named tsconfig.json and that the template is explicitly overriding this behavior on the linked line.

While there are multiple reasons why one might want to use more than one TypeScript script configuration file in a project, editors, such as Visual Studio Code, use the one named tsconfig.json to power features such as intellisense, set various options, and to determine the extent of a project.

It is more than reasonable to use the same file for both and that is actually what would happen by default.

Remarks

Please note that the AngularClass template is extremely bloated and complicated. Considering it is meant as a starting point, which you will no doubt add to, the amount of unnecessary boilerplate and cruft that you start out with by basing your application on such a template should be taken into very serious consideration. This goes double if you are new to any of the tools, transpilers, or frameworks involved.

By the way, I'm actually a contributor to that repository. They took a pull request from me that changed a utility function which someone filed an issue for as being confusing. The funny thing was that I had removed that very function from our project long before I submitted the PR improving it.

Having worked on a project which was derived from one of their templates, I wasted a lot of time ripping out Webpack config related code that was not needed but was getting in the way. We ended up with only a ~hundred lines of Webpack config total. I wasn't, and still am not a huge Webpack fan (JSPM for the win), but Webpack was not being utilized well by the template. Lots of unnecessary work was being done which actually made Webpack seem more complicated than it is. That entire helpers file is basically worthless and none of it had anything to do with Webback, or TypeScript, or even Angular.

This is also a bit troubling since the angular class website sells training material. There's nothing wrong with that in principle or in practice, but they create a lot of complexity in addition to what is inherent in an already complex tool chain.

Answer 2

Will the tsconfig.webpack.json only be applied to the ts-loader used by Webpack?

Yes, that is correct. Here is where the tsconfig.webpack.json is used in webpack.common.js:

  new ngcWebpack.NgcWebpackPlugin({
    ...
    disabled: !AOT,
    tsConfig: helpers.root('tsconfig.webpack.json'),   <----------------
  }),

and for awesome-typescript-loader here:

{
  loader: 'awesome-typescript-loader',
  options: {
    configFileName: 'tsconfig.webpack.json',  <-------------------
    useCache: !isProd
  }
},

while the tsconfig.json file will apply to everything else?

Yes, it's used for tslinting or if you need to produce declaration files. If you're working in IDE it can also be used for intellisense and other IDE specific functionality.