The State of HMR in Angular

The State of HMR in Angular

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.

How to setup HMR on your project?

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.",

webpack web-development javascript angular programming

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Top Enterprise Angular Web Apps Development Company in USA

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!

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

Top Angular JS Development Company in India | Angularjs Development

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 Top Angular Developers | Hire Angularjs Developer India

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

Why Choose Angular JS Development for Perfect Web Apps Development?

Angular JS is a JavaScript framework, this was developed by Google. IT is an open-source framework. Angular JS is responsible for handling a...