With the release of version 11, Angular has now made it easier to enable Hot Module Replacement (HMR) during development. Literally, with a single flag:

$ ng serve --hmr

To review, HMR is a useful feature offered by webpack that allows development changes to modules at runtime without requiring a full refresh. In the past, in order to do this in an Angular CLI app, you would have to download a dev dependency called @angularclass/hmr then add new configuration as well as update the boostrapping process.

In the case of v11, all the changes above won't be necessary anymore.

When enabled, a running application will reflect the new updates to the components, styles and templates instantly while preserving form inputs and the scroll position. This is really good as it results in an overall faster development feedback.

Now, if you are like me who use Angular with TailwindCSS. You'd know that it uses a custom webpack builder, @angular-builders/custom-webpack. I was keen to know how the new update can benefit and potentially introduce bugs to my Angular x TailwindCSS setup.

Thankfully, whipping up a TailwindCSS-powered Angular CLI app is a breeze nowadays.

# Create a new Angular app
$ ng new eleven-tailwind-hmr --routing --style scss --strict

# Add the latest tailwindcss and custom-webpack builder, when prompted select scss as the stylesheet flavor.
$ cd eleven-tailwind-hmr
$ ng add @ngneat/tailwind

At the moment, there's a bug with @ngneat/tailwind template after an update to the webpack-merge, so this line, in the generated webpack.config.js, needs to be updated.

- const merge = require('webpack-merge');
+ const { merge } = require('webpack-merge');

A PR that fixes the issue is on the way, so this extra step won't be required soon.

We're almost there. Currently, the latest custom-webpack builder (10.0.1) that is added by @ngneat/tailwind is not compatible with --hmr. When you run the app, a warning is thrown in the developer console, saying:

[HMR] Cannot apply update. Need to do a full reload!

We need one last step, which is to update to its --next version.

# installs "@angular-builders/custom-webpack": "^11.0.0-beta.1",
$ npm i -D @angular-builders/[email protected]

Fire up ng serve --hmr again. Finally it works!

Demo of an Angular CLI app, served with --hmr flag, styled with TailwindCSS

As you can see, the feedback is very fast making development so much more fun.

I have a created a github repo for anyone to try it out. Please do so and let me know what you think.