HMR will drop styles applied to a component if an HTML element in a component is changed #59558
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
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)
- Add or remove any character from text inside of an HTML element. For example, add an
!inside any of the<p>tags. - Observe that all styles no longer apply to that component's template
- 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. - 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.
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.