An Angular project is normally recompiled multiple times to rebuild and paint the views, loading modules, CSS, etc., even with minor changes saved. De

How To Enable Hot Module Replacement (HMR) in Angular 12

submited by
Style Pass
2023-01-23 10:30:09

An Angular project is normally recompiled multiple times to rebuild and paint the views, loading modules, CSS, etc., even with minor changes saved. Development builds require much more time than production builds, since updating browsers to reflect minor changes can take quite a bit of time. So, Angular released a solution to this issue.

Hot Module Replacement (HMR) is a key webpack feature in Angular, but it is not enabled by default. With the HMR, you can exchange, add, or remove modules while an application is running without a full reload. This allows developers to only update what has changed.

Two environment files are used to create an Angular project: one for development and one for production. We’re going to create another HMR environment file here.

Make sure to update the angular.json file with the NG CLI configurations. In order to enable HMR during the build and serve processes, configurations must be added.

Leave a Comment