Skip to content

HMR Angular DOM Interpolation stop working after first save #59559

@TechGardenCode

Description

@TechGardenCode

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Used to work in previous versions

Description

On a fresh Angular app (19.1.0) I created a new component with a single variable i, which is displayed in the UI along with two buttons to increment/decrement the value of i. Functionality works until the HTML file is saved at which point I am able to see a log of the variable updating, however the value is not updated in the browser

Please provide a link to a minimal reproduction of the bug

  1. Generate a new component:
    ng generate component counter
  2. Replace the content of the generated files with the following code:

counter.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css']
})
export class CounterComponent {
  i: number = 0; // The counter variable

  increment() {
    this.i++;
    console.log('Incremented:', this.i);
  }

  decrement() {
    this.i--;
    console.log('Decremented:', this.i);
  }
}

counter.component.html

<div style="text-align: center;">
  <h1>Counter Component</h1>
  <p>Current Value: {{ i }}</p>
  <button (click)="increment()">Increment</button>
  <button (click)="decrement()">Decrement</button>
</div>

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 19.1.0
Node: 22.12.0
Package Manager: npm 11.0.0
OS: darwin arm64

Angular: 19.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1901.0
@angular-devkit/build-angular   19.1.0
@angular-devkit/core            19.1.0
@angular-devkit/schematics      19.1.0
@angular/cdk                    19.0.5
@schematics/angular             19.1.0
rxjs                            7.8.1
typescript                      5.6.3
zone.js                         0.15.0

Anything else?

No response

Metadata

Metadata

Assignees

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions