ANGULAR 19 Tutorials

HOT MODULE REPLACEMENT - ANGULAR 19

Angular 19 have focused on Hot module replacement.This feature will speed up the time on page load.Previously any change in style or templates will rebuild the whole application, but now it just applies the patch and does not refresh the whole application and browser refresh.The HMR efficiently compiles the modified style or templates alone.This definitely helps in faster development of web applications. For example, you have filled the whole page with some data,but atlast you observe that one button is having red color, instead of blue.In this case if you change the style of the button, entire application will gets refreshed prior to Angular19.But after introducing HMR in angular19, it just patches that style alone and not the whole page, so that the data on that component or page is preserved.you can see the HMR changes in your browser console. In this console, you can see which css has changed and which component has been changed with some random number.

  • Instant result - You can see code changes instantly, without waiting for page reload
  • Quick Results - make changes,see result and finish your work quickly
  • Improved Productivity-you can focus more on coding , without waiting for page reload
  • Enhanced Development Experience-HMR makes your development experience enjoyable.

HMR is enabled by default in Angular 19.Let us see an example, how HMR works? App.component.html: 

<div>
    <h1>>WELCOME TO USMTECHWORLD (HMR) IN ANGULAR19<h1>
    <input type="text" value=usmtechworld>
<div>

Now change h1 tag value from "Welcome to USMTECHWORLD"" to "USMTECHWORLD".see browser, h1 tag is changed and textbox value also cleared. But think of the situation that you have some 30 fields in this page and after that thought of changing the h1 tag color to red.After changing color to red, entire page got refreshed and all text box value is cleared.This makes developer in frustrated situation.In this case, HMR is used.Now create a scss class to change style of header used in component. App.component.scss 

                    h1{
                        color:blue
                        }
Now if you go back to browser and see , page will not be refreshed,also textbox value will not get vanished.

How to disable HMR? You have 2 options to disable HMR, option 1: command prompt,give ng serve --no-hmr
option 2: angular.json, make hmr false.