Fallback content throws with multiple components v18.x

[timdeschryver]

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 {
}