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
- 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
- Ensure
ts
extension always comes beforejs
- Use typescript loaders that transpire ts without creating JS files. Example:
ts-loader
,awesome-typescript-loader
Test was conducted using package listed below
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.