Using Hot Module Replacement (HMR) in Angular 19
In Angular 19 a new feature got released: Hot Module Replacement (HMR). This feature allows you (the developer) to see updates of the styling without reloading the entire app, while developing. So when you update the (S)CSS of a component, the change is applied directly and only the styling is updated. The component itself does not change/refresh.
No state loss
This new feature ensures that a component's state remains unchanged. For example, if you modify the styling of a form that already has data entered, the data won't be lost.
So the component will not be reloaded when you update its styling, but will do when you update the component's template (.html) or TypeScript (.ts).
A difference in rendering
When this new feature is enabled, I noticed a change in how component styling is applied. While working on a large app I noticed that the styling of newly rendered component is applied later to its HTML. This delay results in a flickering effect, making the rendering of the component appear inconsistent. A contributing factor to this behaviour could be that some components contained a large amount of SCSS rules...
I opened Dev Tools and discovered that every time a new component is added to the view, a link tag referencing a stylesheet is appended to the head of the page. This is a different behaviour compared to the rendering without HMR, where inline style-tags are added to the head-tag.
When HMR is enabled (new behaviour):
When HMR is disabled (old behaviour):
Disabling the HMR feature
You don't need to use this new feature while you develop your application in new Angular version. There are ways to disable it.
Use the '--no-hmr' flag
You can use Angular's serve command with the --no-hmr flag.
ng serve --no-hmr
Update configuration in angular.json
You can add the property hmr with value false to the development server configuration in the angular.json file.
{
"projects": {
"your-app": {
"architect": {
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"development": {
"buildTarget": "your-app:build:development",
"hmr": false
}
}
}
}
}
}
}