-
Notifications
You must be signed in to change notification settings - Fork 26.5k
Description
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
Yes
Description
When a change is made to HTML/CSS in a client-side rendered project with HMR enabled, the app will be reloaded fully under most scenarios where there is a class declared in addition to a component's class.
Example:
import { Component } from '@angular/core';
class CommentMeInOrOut {}
@Component({
selector: 'app-class-above',
template: `
<p>
App will reload on template or style change, if CommentMeInOrOut is left in.
If commented out or removed entirely, HMR works fine.
Same in *most* permutations of inline or external file templates/styles.
</p>
`,
styles: `
p {
color: green;
}
`,
})
export class ClassAbove {}
If the additional class is commented out, then HMR works fine.
EXCEPTION: There seems to be a notable exception for external template files. When an external template is changed, HMR works like intended and does not cause full application reload. I marked those two templates with a star emoji in the templates.
About the reproduction Stackblitz:
- A counter goes up by 1 for every second without an application reload
- I made a bunch of components with different permeations of inline or external file templates/styles.
- Control: One example has no extra class, not even commented out. This works as intended and like the other examples when the extra class is commented out or removed.
- One example has a component with inline template/styles and then another component class which is used in the template of that file's component. If the inline templates/styles of either are changed, the whole app reloads.
- edit: with default change detection and using Zone. Unsure if those would change anything but I have done so many permutations already. Though that said, in the v19.1.4 project I found this in, the zone project using
OnPush
change detection had the same issues as this repro's equivalent.
Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/stackblitz-starters-sct51wue?file=src%2Fmain.ts
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run ng version
)
Angular CLI: 20.1.2
Node: 20.19.1
Package Manager: npm 10.8.2
OS: linux x64
Angular: 20.1.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, router
Package Version
------------------------------------------------------
@angular-devkit/architect 0.2001.2
@angular-devkit/core 20.1.2
@angular-devkit/schematics 20.1.2
@angular/build 20.1.2
@angular/cli 20.1.2
@schematics/angular 20.1.2
rxjs 7.8.2
typescript 5.8.2
zone.js 0.15.0
Anything else?
I initially observed this in a v19.1.4 common / 19.1.5 build project. I did not test all these permutations in that one though.