Projecting projected content through an ng-template causes Cannot read properties of null (reading 'parentElement') during hydration annotation #56750
Description
Which @angular/* package(s) are the source of the bug?
core
Is this a regression?
No
Description
A bit of a a mouthful of a ticket name, but this was the best way I could summarise it. If you project an ng-content into an ng-content that's in an ng-template (including for ngIf or @if blocks), hydration will fail with Cannot read properties of null (reading 'parentElement'). This has occurred in a few places in my codebase which has a large component library featuring some complex components and variants of those components.
For example, consider a component with this template:
<ng-content select="app-dropdown-trigger"></ng-content>
<!-- this would normally be dynamic -->
@if(false) {
<ng-content select="app-dropdown-content"></ng-content>
}Using this component directly and projecting content into the ngIf works fine and the component hydrates as expected. (note: app-dropdown-content also contains an ng-content here, so this is two levels of projection)
However, if you add a wrapper component that makes a special case of it and projects into the app-dropdown-content, with a template like this:
<app-dropdown>
<app-dropdown-trigger>More</app-dropdown-trigger>
<app-dropdown-content>
<ng-content />
</app-dropdown-content>
</app-dropdown>Using this new component causes the server to fail with Cannot read properties of null (reading 'parentElement'). This throws an actual error during SSR annotation and doesn't return a response.
This only happens when hydration is enabled on the element. Skipping hydration on the inner component (app-dropdown, in this case) doesn't fix the issue, but skipping hydration on the outer component does.
Please provide a link to a minimal reproduction of the bug
https://github.com/henry-alakazhang/hydration-form-repro/tree/content-content-issue
Please provide the exception or error you saw
Cannot read properties of null (reading 'parentElement')
at navigateBetween (~/hydration-form-repro/node_modules/@angular/core/fesm2022/core.mjs:14843:52)
at calcPathBetween (~/hydration-form-repro/node_modules/@angular/core/fesm2022/core.mjs:14890:18)
at calcPathForNode (~/hydration-form-repro/node_modules/@angular/core/fesm2022/core.mjs:14943:16)
at appendSerializedNodePath (~/hydration-form-repro/node_modules/@angular/core/fesm2022/core.mjs:37251:35)
at conditionallyAnnotateNodePath (~/hydration-form-repro/node_modules/@angular/core/fesm2022/core.mjs:37463:9)
at serializeLView (~/hydration-form-repro/node_modules/@angular/core/fesm2022/core.mjs:37374:9)
at annotateHostElementForHydration (~/hydration-form-repro/node_modules/@angular/core/fesm2022/core.mjs:37502:21)
at serializeLView (~/hydration-form-repro/node_modules/@angular/core/fesm2022/core.mjs:37401:17)
at annotateHostElementForHydration (~/hydration-form-repro/node_modules/@angular/core/fesm2022/core.mjs:37502:21)
at annotateComponentLViewForHydration (~/hydration-form-repro/node_modules/@angular/core/fesm2022/core.mjs:37079:16
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 18.0.6
Node: 18.20.3
Package Manager: yarn 1.22.19
OS: darwin arm64
Angular: 18.0.5
... animations, cdk, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1800.2
@angular-devkit/build-angular 18.0.2
@angular-devkit/core 18.0.6
@angular-devkit/schematics 18.0.6
@angular/cli 18.0.6
@angular/localize 18.0.1
@angular/ssr 18.0.6
@schematics/angular 18.0.6
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.6
Anything else?
No response