Member-only story

How to enable Hot Module Reload in Angular 6? Things people miss

Tom Smykowski
5 min readSep 30, 2022

--

I know you expect an article explaining it. But really. How to enable Hot Module Reload in Angular 6? I also want to know :-) Just joking.

I was able to enable it in Angular 6. However, it does not work as expected. Since in the project lazy modules are used, the page still flickers, it does not update only part of the app I have changed. Maybe it is because of lazy modules.

Secondly, I was unable to set up CSS to update automatically without refreshing the whole page. So if you have a solution to enable that part I’d love to see it.

What I was however been able to do, is to decrease dev rebuild time by 50%. Something that was my goal since the project was rebuilding in 60 seconds.

I will tell you what I have stitched from articles found online. Some of the parts may be unnecessary, I don’t know, because there is too little information to figure it out (you are also welcome to comment!):

Install HMR and add command to start it

Install Hot Module Reload. To do it call this in your console:

npm install @angularclass/hmr

If you use yarn, or other package management system, just use the appropriate equivalent.

--

--

Tom Smykowski
Tom Smykowski

Written by Tom Smykowski

🚀 Senior/Lead Frontend Engineer | Angular · Vue.js · React | Design Systems, UI/UX | Looking for a new project! 📩 contact@tomasz-smykowski.com

No responses yet