Con l'ultima versione di Angular è diventata disponibile una funzionalità molto importante per noi developer: il Hot Module Replacement. Questo permette alla CLI, o più precisamente a Webpack, di sostituire all'interno della pagina web, il componente, o una parte dell'html, senza aver la necessità di ricaricare tutta la pagina.

Questa funzionalità era già disponibile precedentemente, ma richiedeva l'installazione di vari pacchetti e una configurazione particolare del progetto. Dalla versione 11 basterà utilizzare il comando ng serve --hmr.

Facciamo un semplice esempio per capirne la funzionalità: se stiamo compilando un form, costruito con più componenti, o un wizard per inserimento dati, possiamo modificare una sua parte, senza la necessità di dover, a ogni modifica, ripartire da zero.

<!-- primo componente -->
<p>primo works!!!</p>
<input/>
<app-secondo></app-secondo>

<!-- secondo componente -->
<p>secondo works!</p>
<input/>

Se sulla pagina web andiamo a compilare i due campi di input e successivamente nel codice cambiamo i testi all'interno dei paragrafi in entrambi i componenti, salvando le modifiche, vedremo che i valori da noi inseriti negli input resteranno invariati.