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

19

Description

HMR is not functioning correctly in new projects generated with Angular CLI v20+. It only applies updates for global styles (styles.scss). Any changes to component templates (inline or external .html files) or component-scoped styles (inline or external .scss files) result in a full-page reload, and component state is lost (e.g., text in an input field is cleared).

This issue persists across multiple environments and configurations:

It is not an SSR issue: The problem occurs in brand-new projects generated with and without SSR (ng new --ssr=false).

It is not a Node.js version issue: Tested on multiple supported Node.js versions, including 20.16, 20.17, and the latest 22.x LTS.

It is not a local environment issue: The problem is reproducible on both a native Windows machine and inside a clean Linux environment using VS Code Dev Containers (Docker).

The file watcher is working: When using --poll inside Docker, changes are detected, but it still results in a full reload instead of HMR.

Minimal Reproduction

Prerequisites:

Angular CLI: v20 or later

Node.js: v22 (LTS)

Steps:

1. Create a new, clean Angular application without SSR.

ng new hmr-repro-app --ssr=false
2. Navigate into the new project directory.

cd hmr-repro-app
3. Add a simple input field to the component template to test state preservation. Open
src/app/app.component.html and replace its content with:

<h1>HMR Test</h1>
<p>Type something in the input below, then change this text.</p>
<input type="text" />

4. Serve the application.

5. ng serve

6. Open the application in the browser. Type some text into the input field.

7. Now, go back to src/app/app.component.html and change the text in the

   tag. Save the file.

Expected Result
The text paragraph on the page should update instantly via HMR without a full-page reload. The text you typed into the input field should remain because the component's state is preserved.

Actual Result
The browser performs a full-page reload. The text typed into the input field is cleared, which proves that HMR has failed and the component's state was destroyed and re-created.

Exception or Error

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 20.1.0
Node: 22.17.0
Package Manager: npm 10.9.2
OS: win32 x64

Angular: 20.1.0
... build, cli, common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.2001.0
@angular-devkit/core         20.1.0
@angular-devkit/schematics   20.1.0
@schematics/angular          20.1.0
rxjs                         7.8.2
typescript                   5.8.3

Anything else relevant?

This issue does not appear to be specific to any single environment, as it has been reproduced under multiple conditions.

• Browser: Tested on the latest version of Google Chrome.
• Operating System: The issue is reproducible on both native Windows and on Linux (when running inside a VS Code Dev Container).
• Package Manager: npm
• IDE: Visual Studio Code