Hot Module Reload speeds up development and debugging. It is a Webpack feature that updates changed modules without reloading the whole…
Hot Module Replacement speeds up development and debugging. It is a Webpack feature that updates changed modules without reloading the whole page. Angular 11 made it easy to use HMR by providing it out-of-box in the CLI.
While developing and debugging front-end applications, quite often we edit component styles, HTML template, labels, text etc. In Angular, we are used to file watcher, which automatically refreshes the page for each save. It is a step-up from traditional tools but we lose context. We might have to repeat few steps to reach the screen in works.
HMR is a bit of magic. The Webpack Dev Server feature adds/removes modules while the application is running. It allows selectively updating parts of the screen changed by the developer, without losing state / reloading the whole page.
While it’s possible to configure HMR in Angular prior to the version 11, the process was cumbersome. With recent major version release (11), Angular CLI provided the feature out of box.
To run the project with HMR enabled, use
--hmr flag with
ng serve. HMR is only useful on dev builds. While we experiment debugging with HMR, it is a good idea to create a new script in package.json for running the application in traditional way. It gives a choice to ignore hmr. Consider the following snippet in package.json, under scripts.
"start": "ng serve --hmr", "// 1": "// yarn start (or npm start) uses HMR by default", "start:no-hmr": "ng serve", "// 2": "// if you choose to not use HMR, use this script.",
AppClues Infotech is a top Mobile App Development Company in USA building high-quality Android, iOS, and Native apps for Startups, SMBs, & Enterprises. Contact us now!
One the best AngularJS web app development company in India for outsourcing custom Angular JS web app development. 14+Yrs Exp, 500+ Staff, 13800+ Projects, 6800+ Clients.
Hire dedicated Angular JS developers & programmers in India for custom full-stack AngularJS app development projects on an hourly / full-time basis. Strict NDA, 16+ years exp & 2500+ clients|450+ Experts