{{ message }}
Repository navigation
HMR Breaks self-referencing components #59632
Description
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
Yes
Description
Related to #59602
Having a nested component make "children" components not render with HMR enabled. When i tried ng serve \--no-hmr everything works as expected.
import { Component, Input } from '@angular/core';
interface Comment {
id: number;
author: string;
text: string;
children?: Comment[];
}
@Component({
selector: 'app-comment',
template: `
<div class="comment">
<div class="comment-content">
<strong>{{ comment.author }}</strong>: {{ comment.text }}
</div>
<div class="comment-children">
<!-- THIS IS NOT RENDERED -->
@for (children of comment.children; track children.id) {
<app-comment [comment]="child" />
}
</div>
</div>
`,
styles: [
`
.comment {
margin: 10px 0;
padding-left: 20px;
border-left: 2px solid #ccc;
}
.comment-content {
margin-bottom: 5px;
}
.comment-children {
margin-top: 10px;
}
`,
],
})
export class CommentComponent {
@Input() comment!: Comment;
}Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 19.1.3
Node: 20.18.0
Package Manager: npm 11.0.0
OS: darwin arm64
Angular: 19.1.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.1901.3
@angular-devkit/build-angular 19.1.3
@angular-devkit/core 18.2.8
@angular-devkit/schematics 18.2.8
@angular/cdk 19.1.0
@angular/cli 19.1.3
@angular/material 19.1.0
@angular/material-moment-adapter 19.1.0
@angular/youtube-player 19.1.0
@schematics/angular 19.1.3
rxjs 7.8.1
typescript 5.7.3
zone.js 0.15.0
Anything else?
No response
Activity
michael-small commentedon Jan 20, 2025
I found this interesting and I made a full repro on the latest patches https://github.com/michael-small/hmr-issue-multiple-components/blob/HMR-Breaks-nested-components-%2359632/src/app/comment.component..ts. Can confirm.
[-]HMR Breaks nested components[/-][+]HMR Breaks self-referencing components[/+]cagataycivici commentedon Jan 21, 2025
Also facing with this at PrimeNG codebase, many components are broken on our side.
fix(core): capture self-referencing component during HMR
fix(core): capture self-referencing component during HMR (#59644)
fix(core): capture self-referencing component during HMR (angular#59644)
fix(core): capture self-referencing component during HMR (angular#59644)
angular-automatic-lock-bot commentedon Feb 21, 2025
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.