How to replace angular2-template-loader in Webpack 5 with ts-loader

Question

I've inherited a Webpack4 Angular 11 lerna bootstrap repo, and I'd like to get us on Webpack5 (as well as workspaces etc.)

This repo uses angular2-template-loader with ts-loader and fork-ts-checker-webpack-plugin.

angular2-template-loader does not work with webpack5 and the only replacement I've found has been @ngtools/webpack, but that requires replacing ts-loader and fork-ts-checker-webpack-plugin. Our build is slow enough as is, and I'm worried @ngtools/webpack will be even slower as well as requiring a painful migration adding the new plugin everywhere with configuration unique to every sub-project in the monorepo.

So, has anyone managed to replace the functionality of angular2-template-loader in webpack5 while retaining ts-loader?

Answer 1

Based on a Quick Internet search, Angular 12 CLI uses Webpack 5.

Angular 12 has been released and with it the much awaited Webpack 5 upgrade.

If your project does not use the Angular CLI, I strongly recommend converting it to Angular CLI project.

If your project does use the Angular CLI; then just upgrade, using these instructions. I recommend upgrading all the way to the current version of Angular.