Fallback content throws with multiple components v18.x #55466
Description
Which @angular/* package(s) are the source of the bug?
core
Is this a regression?
Yes
Description
Adding multiple components that make use of fallback content throws an error.
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
To reproduce:
child component:
@Component({
selector: 'app-child',
standalone: true,
template: `
<ng-content select="child-header"><h1>Default Header</h1></ng-content>
<ng-content><p>Default Content</p></ng-content>
`
})
export class ChildComponent {
}parent component:
@Component({
selector: 'app-root',
standalone: true,
imports: [ChildComponent],
template: `
<app-child>
<div child-header><h3>My header</h3></div>
<div>Text by app</div>
</app-child>
<app-child>
</app-child>
`
})
export class AppComponent {
}Error:
main.ts:5 ERROR TypeError: Cannot read properties of null (reading 'parent')
at getParentRElement (core.mjs:10547:44)
at appendChild (core.mjs:10696:25)
at declareTemplate (core.mjs:19174:9)
at insertFallbackContent (core.mjs:26324:27)
at Module.ɵɵprojection (core.mjs:26313:9)
at ChildComponent_Template (child.component.ts:8:5)
at executeTemplate (core.mjs:11326:9)
at renderView (core.mjs:12528:13)
at renderComponent (core.mjs:12474:5)
at renderChildComponents (core.mjs:12576:9)Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 18.0.0-next.3
Node: 20.9.0
Package Manager: npm 10.1.0
OS: win32 x64
Angular: 18.0.0-next.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1800.0-next.3
@angular-devkit/build-angular 18.0.0-next.3
@angular-devkit/core 18.0.0-next.3
@angular-devkit/schematics 18.0.0-next.3
@angular/cli 18.0.0-next.3
@schematics/angular 18.0.0-next.3
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.4
Anything else?
It seems like moving the children around fixes this issue:
parent component:
@Component({
selector: 'app-root',
standalone: true,
imports: [ChildComponent],
template: `
<app-child>
</app-child>
// 👇 When moved this seems to work (individual renders are also OK)
<app-child>
<div child-header><h3>My header</h3></div>
<div>Text by app</div>
</app-child>
`
})
export class AppComponent {
}