HMR Triggers Full Page Reload When Using i18n in HTML Template #30111
Description
Command
serve
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
When using Angular with Vite for development, Hot Module Replacement (HMR) works as expected for standard HTML templates. However, if an i18n attribute is present in the template (e.g., <h1 i18n="@@greetings">Title</h1>), editing the template triggers a full page reload instead of a hot update. This negates the benefits of HMR and slows down the development workflow.
Minimal Reproduction
- Run commands
ng new my-i18n-app
cd my-i18n-app
ng add @angular/localize
ng serve
-
In Chrome navigate to
http://localhost:4200 -
Open the Chrome DevTools Network tab and watch for GET requests for chunk files.
-
In src/app/app.component.html add
<h1>Hello world!</h1> -
HMR is working — only the component is fetched via a GET request.
-
Now change the same file to include i18n
<h1 i18n="@@greetings">Hello world!</h1> -
HMR is not working — a full page refresh is triggered, and the entire app reloads instead of just updating the component.
Exception or Error
Your Environment
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 19.2.7
Node: 20.17.0
Package Manager: npm 10.8.2
OS: darwin arm64
Angular: 19.2.6
... common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1902.7
@angular-devkit/build-angular 19.2.7
@angular-devkit/core 19.2.7
@angular-devkit/schematics 19.2.7
@angular/cli 19.2.7
@schematics/angular 19.2.7
rxjs 7.8.2
typescript 5.7.3
zone.js 0.15.0
Anything else relevant?
No response