Hot Module Replacement (HMR), often referred to as Hot Module Reloading, is a once old now brought back feature in Angular v11. The arrival of Ivy has allowed us to do so many many things, not the least of which is use HMR.
So what is Hot Module Replacement? Obviously, from the name, we can deduce that it replaces modules in hot mode. But what is it actually doing for us?
Why HMR?
- No reloading
- Retain form data between changes
- Faster feedback loop
- Not required (currently an opt-in feature)
- Provided since the v11 of the CLI
There isn’t much written about HMR right now, as it is a newly resurrected feature. (I say this because Justin Schwartzenberger added it once before to the CLI.) But you can check out Alan Agius’s PR, which is currently the most detailed document on the feature.
If you’d like to get started using HMR, it is as simple as this:
- Upgrade to Angular v11
- Run your project using the CLI with the HMR flag
ng serve --hmr
Alyssa is the Angular Developer Advocate for Kendo UI. If you're into Angular, React, Vue or jQuery and also happen to love beautiful and highly detailed components, check out Kendo UI. You can find the Kendo UI for Angular library here or jump into a free 30 day trial today. Happy Coding!