Angular 11 Updated Hot Module Replacement (HMR) Support

In Angular 11, to configure or enable HMR is a bit easy now, efforts you need to configure the HMR has been reduced drastically. Now we've CLI command for that as well. In version 11 we’ve updated the CLI to allow enabling HMR when starting an application with ng serve.

Hot Module Replacement (HMR) 

Hot Module Replacement is a mechanism that allows modules to be replaced without a full browser refresh.

Now you can simply use the ng serve command with an hmr tag to enable HMR:

ng serve --hmr

After the local server starts the console will display a message confirming that HMR is active, HMR will be enabled for the dev server.

Go through https://webpack.js.org/guides/hot-module-replacement for more details on working with HMR for webpack.

Now during development, the latest changes will be instantly updated into the running application. All without requiring a full page refresh. By using the HMR technique the application development becomes faster as fewer resources are loaded after saving the changes in the project.