This article is part of the Ionic Framework / Capacitor Advent Calendar 2020.
When working on Ionic/Angular, ionic serve's change-detection-to-reload interval stays fine on small apps but tends to stretch as the project grows. HMR (Hot Module Reload), added in Angular 11, changes that a lot—and you can use it with Ionic/Angular too.
How to Enable HMR Live Reload
First you need to update to Angular 11. Run the following in a terminal:
% ng update @angular/cli @angular/core
% npm install @ionic/angular-toolkit@latest
The Ionic version should not block HMR, but I verified this with @ionic/angular@5.4.5. After the update, run:
% ionic serve -- --hmr
That serves with HMR enabled. Try changing colors—first edit an HTML template. Add a color attribute to ion-toolbar on the BLANK template. Editor on the left, browser on the right:
No full reload—it updates in place. Next, change a theme color:
Again no reload, and it applies quickly. If you had navigated with a push transition or have a modal open, a reload may still run—so it is not "never reload in every case"—but it should boost productivity several times over compared to before.
Fine-Tuning the Configuration
The ionic serve -- --hmr command only wraps the Angular CLI through Ionic CLI. What actually runs is:
% ng run app:serve --host=localhost --port=8100 --hmr
If you need finer control, running ng directly may be easier. Keep an eye on Angular CLI improvements too.
See you next time.