Skip to content

HMR Triggers Full Page Reload When Using i18n in HTML Template #30111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
1 task
timothyBrake opened this issue Apr 16, 2025 · 1 comment
Closed
1 task

HMR Triggers Full Page Reload When Using i18n in HTML Template #30111

timothyBrake opened this issue Apr 16, 2025 · 1 comment

Comments

@timothyBrake
Copy link

timothyBrake commented Apr 16, 2025

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

  1. Run commands
ng new my-i18n-app
cd my-i18n-app
ng add @angular/localize
ng serve
  1. In Chrome navigate to
    http://localhost:4200

  2. Open the Chrome DevTools Network tab and watch for GET requests for chunk files.

  3. In src/app/app.component.html add <h1>Hello world!</h1>

  4. HMR is working — only the component is fetched via a GET request.

  5. Now change the same file to include i18n <h1 i18n="@@greetings">Hello world!</h1>

  6. 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

@alan-agius4
Copy link
Collaborator

This is currently expected support for HMR with i18n is being tracked in #29457

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants