-
Notifications
You must be signed in to change notification settings - Fork 27.1k
Description
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
Yes
Description
Commenting out or entirely removing a component selector (<app-thing />) causes odd behavior.
Take the following example, and imagine I just did ng serve in a fresh CLI generated (19.1.1) app, which had components a/b/c generated as inline template and inline style with the default <p>a works!</p> and so on.
@Component({
selector: 'app-root',
// templateUrl: './app.component.html', // also applies to external
template: `
<app-a />
<app-b />
<app-c />
{{version.full}}
`,
styleUrl: './app.component.scss',
imports: [AComponent, BComponent, CComponent],
})
export class AppComponent {
version = VERSION;
}If I removed <app-a />, the view now only shows the template of <app-b /> and the version. However, this is the rendered body of <app-root>, using either file-based or inline template:
<app-root ng-version="19.1.1"><app-b><p> b works! </p></app-b><app-c></app-c> 19.1.1 </app-root>Other variants
Removing <app-b />
<app-root ng-version="19.1.1"><app-a><p> a works! </p></app-a><app-c></app-c> 19.1.1</app-root>Removing <app-c />
<app-root ng-version="19.1.1"><app-a><p> a works! </p></app-a><app-b><p> b works! </p></app-b> 19.1.1</app-root>Trends:
- When removing A or B, C's host element stays but is empty. But when removing C, A and B properly render and there is no C.
- Not really an issue with non component HTML elements, such as a
<p>stuff</p>tag in the<app-root />template. And the untagged full version I had for my reference was also fine. However, components still are spotty like above when removed and in the same template as primitive elements or text (edited: clarify).
Please provide a link to a minimal reproduction of the bug
https://github.com/msmallest/hmr-issue-multiple-components
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 19.1.1
Node: 20.11.1
Package Manager: npm 10.2.4
OS: darwin arm64
Angular: 19.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1901.1
@angular-devkit/build-angular 19.1.1
@angular-devkit/core 19.1.1
@angular-devkit/schematics 19.1.1
@schematics/angular 19.1.1
rxjs 7.8.1
typescript 5.7.3
zone.js 0.15.0
Anything else?
My reproduction has 3 branches.
mainaka CLI generated with a 19.1.1 global19.1.1aka I bumpedmainwith the actual latest in thepackage.jsonnightlies-19.1.1+that points at all the nightlies (edit: and resolved with--force).
My examples I pasted were from main. I observed the same view behavior in 19.1.1 as main but did not check for the exact DOM in 19.1.1. Same story for the nightly but the DOM did look the same at a glance, including the strange C behavior.
Additionally, I didn't look as close as in this reproduction, but the end behavior I initially observed in a large vanilla Angular workspace monorepo of module based apps that I got to what resolves to 19.1.1 for @angular/core.