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

Description

When a template save occurs that changed an HTML element's inner content, such as adding text inside of a <p> tag for example, the styles of that component stop applying. This can temporarily be solved by adding something like a character, for example !, outside of an HTML element.

Though template HMR is new as the default in 19.1, I consider this a regression since the same ng serve command now produces different results.

Minimal Reproduction

Process

(in the 19.1's)

1. Add or remove any character from text inside of an HTML element. For example, add an ! inside any of the <p> tags.
2. Observe that all styles no longer apply to that component's template
3. Observe that if you add a character outside of an HTML element, such as below the comment and above the <p> aka on line 14, that the styles once again apply after an HMR refresh.
4. Repeat 1-3 as needed.

This is true with changes in either the main.ts inline template or the external template component which is placed inside of main.ts's template. But one breaking or fixing following the steps doesn't seem to fix the other template's issues.

Commands run (including args):

ng serve

Packages added

None beyond Stackblitz starter which was bumped to 19.1.0 for all packages, or a CLI generated app also being bumped from 19.0.6 to 19.1.0 for all packages. Both done manually since I couldn't get the CLI to bump with an ng update.

Reproductions: 2 Stackblitzes and 1 repo

Two Stackblitzes with the default stackblitz configuration, aka serves with "builder": "@angular/build:dev-server",

19.0.6 with only style HMR (by default)

Angular 19.1 with style HMR and template HMR (by default)

Repo that is essentially the 19.1 Stackblitz, but using "builder": "@angular-devkit/build-angular:dev-server", as the CLI auto generates to use. Same type of issue occurs.

19.1-hmr-issue

Related code changes

To get parity I condensed the CLI app to be structured closer to the Stackblitz starters, meaning taking extra configuration out of main.ts and placing the root file and config in there. The builders of the CLI app remain the same since that is what CLI generated apps use.

As for overall changes from general starting states of apps, this consists of one root component with inline template and inline style properties, and then one component with an external template but internal style property.

Potentially related but ruled out of this reproduction: I wonder if another scenario where there is a component with inline template but exterior style impacts anything, but so much was going on already.

Exception or Error

Your Environment

## Stackblitz

Angular CLI: 19.1.0
Node: 18.20.3
Package Manager: npm 10.2.3
OS: linux x64

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

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1901.0
@angular-devkit/core         19.1.0
@angular-devkit/schematics   19.1.0
@schematics/angular          19.1.0
rxjs                         7.8.1
typescript                   5.7.3
zone.js                      0.15.0

## Macbook that ran the CLI generated app

Angular CLI: 19.1.0
Node: 20.11.1
Package Manager: npm 10.2.4
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
@schematics/angular             19.1.0
rxjs                            7.8.1
typescript                      5.6.3
zone.js                         0.15.0

Anything else relevant?

Same issue applies on my Windows 11 in either Stackblitzes or running from a WSL2 Ubuntu local dev server.

All of this is in Chrome, and I just checked Firefox on the Mac and the same occured.