Angular 11 | Hot Module Replacement | Save development time

Angular team are doing great in terms of reducing web bundle size and improving the application rendering time on the browser.

In Angular 11 also they have done all these great stuff but this time they also added HMR (Hot Module Replacement) feature which will now help everyone to save lots of development time.

This feature you can utilized using angular cli only.

What is the problem for now ?

When we write code in Angular and save then the whole code gets rebuild and whole view gets repainted.

That means Angular reloads JS/HTML/CSS even for every small change which frustrate developer.

Also since application gets reloaded even for a small change therefore application lose the last state before doing a change.

For example, if you are making reactive form in Angular and you filled some data to the form for debug purpose but if you do a minor change then due to reload of all files & repaint whole view, you will lose all data which is frustrating and will again take developer time to fill all that data again.

How we can solve this problem ?

answer: HMR (Hot Module Replacement)

How we can use HMR using Angular 11 ?

HRM is Webpack feature which is also used by Angular11 team since Angular build system is Webpack based.

HRM feature enables development faster because it updates limited resource after you save code in project.

To enable HMR using Angular 11 cli, following command need to be execute

Github repo link to try

How to use this repo ?

  1. checkout this repo
  2. open command prompt and go till hot-module-reload folder
  3. run npm install
  4. to run the code in hmr mode (hot module replacement) mode, just run npm run start:hmr
  5. once above command is executed then you will be able to see below screen

In the above screenshot, you could see as NOTICE that code is running into HMR mode.

6. Open chrome and run http://localhost:4200/

7. Below screen will be coming:

8. open chrome dev tool (press F12) and go to Network tab

9. open code and just try to change Test app is running! label to Test app is running!!! and save.

10. you will be able to see in Network tab that only few files gets reloaded which is due to HRM. Below is the screenshot:

Lets also try to put some value to textbox

Lets try to put some value (say demo test app)in textbox where test is already there and then change Test app is running!!! label to Test app is running! in the code and then watch if textbox value is persisted

In the above screenshot you could see that even changing label in the code, textbox value is persisted due to application is running into HRM mode.

I hope this article will help you to understand HMR benefits and how it could help to save development time.

Please give a clap if you really like this article!!!


Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store