Webpack fails to load TS files?

This week I learned how to setup Webpack module resolution for Angular compiler.

TL;DR

Angular compiler creates a virtual file system that contains transpired code. So, Webpack may load JS files even if you were expecting it to load TS ones.

You can prevent this uncertainty, by reordering extensions in your webpack configuration.

Angular compiler: @ngtools/webpack + AngularCompilerPlugin

JS file: a file which has a .js extension

TS file: a file which has a .ts extension

Intro

The other day, I was playing around with Webpack. I wanted to use the angular Webpack loader to compile normal Typescript.

Surprisingly, I was able to create a bundle from my ts files without a hassle.

However, when I ran Webpack in watch mode, things stopped working. Every time I made changes to TS file other than the entry file, Webpack would not rebuild the bundle.

So, I dug around and found out that the issue lied within my module resolution configuration. In this write up, I will discuss the root cause and provide possible solutions.

Problem

Let us say that we have an app with the file structure below

|-index.ts
|-utils
  |-index.ts

1. Webpack config

...
extensions: ['.js', '.ts']
...

When we run Webpack npx webpack --config webpack.config.ngc.js, we get an output like the one below

Notice the call to ./utils/index.js

2. Webpack config

...
extensions: ['.ts', '.js']
...

Now, we get an output like the one below

In scenario 1, Webpack used a JS file because

• Angular compiler has compiled the ts file and saved JS version inside a virtual file system.
• Module resolution config instructed Webpack to look for JS files first then TS files second.

Going back to our watch mode case, the build will succeed as expected because that JS file was created using its ts counterpart. However, Webpack will NOT watch the ts file because it did not use it during the initial build.

Possible solutions

1. Ensure ts extension always comes before js
2. Use typescript loaders that transpire ts without creating JS files. Example:ts-loader ,awesome-typescript-loader

Test was conducted using package listed below

Webpack and Angular compiler

Conclusion

When using Webpack with Angular compiler, it is advised to pay attention to order of extensions inside resolver configuration. Incorrect configuration prevents Webpack from watching ts files.

Resource

• ngtools/webpack
• Webpack v4