Skip to content

Incremental Hydration throws error - Cannot read properties of undefined (reading 'p') on Client Side Navigation to this page #58359

@naveedahmed1

Description

@naveedahmed1

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

When using Incremental Hydration, the below code works but subsequent code throws error on client side navigation to this page from another page:

This works:

@if (pageHeading() && !isLoggedIn()) {
@defer(hydrate when isLoggedIn()) {
<div class="mat-card p15 pb7 mb10">
  <h1 class="mb10">{{pageHeading()}}</h1>
  <p class="mb10 paragraph">{{pageDescription()}}</p>
</div>
}
}

This doesn't work:

@defer(hydrate when isLoggedIn()) {
@if (pageHeading() && !isLoggedIn()) {
<div class="mat-card p15 pb7 mb10">
  <h1 class="mb10">{{pageHeading()}}</h1>
  <p class="mb10 paragraph">{{pageDescription()}}</p>
</div>
}
}

Error

core.mjs:7283 ERROR TypeError: Cannot read properties of undefined (reading 'p')
    at findFirstKnownParentDeferBlock (core.mjs:22378:54)
    at core.mjs:22414:7
    at Generator.next (<anonymous>)
    at chunk-4MWRP73S.js?v=7a14075d:76:61
    at new ZoneAwarePromise (zone.js:2702:25)
    at __async (chunk-4MWRP73S.js?v=7a14075d:60:10)
    at hydrateFromBlockNameImpl (core.mjs:22403:91)
    at core.mjs:22445:16
    at Generator.next (<anonymous>)
    at chunk-4MWRP73S.js?v=7a14075d:76:61

Similarly when using the second code block, incremental hydration works as expected on hard page load i.e. when isLoggedIn() is true, this div gets removed. But that doesn't seem to be the case with the first code block.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

core.mjs:7283 ERROR TypeError: Cannot read properties of undefined (reading 'p')
at findFirstKnownParentDeferBlock (core.mjs:22378:54)
at core.mjs:22414:7
at Generator.next ()
at chunk-4MWRP73S.js?v=7a14075d:76:61
at new ZoneAwarePromise (zone.js:2702:25)
at __async (chunk-4MWRP73S.js?v=7a14075d:60:10)
at hydrateFromBlockNameImpl (core.mjs:22403:91)
at core.mjs:22445:16
at Generator.next ()
at chunk-4MWRP73S.js?v=7a14075d:76:61

Please provide the environment you discovered this bug in (run ng version)

@angular-devkit/architect 0.1900.0-next.13
@angular-devkit/build-angular 19.0.0-next.13
@angular-devkit/core 18.2.4
@angular-devkit/schematics 18.2.4
@angular/cdk 19.0.0-next.10
@angular/cli 19.0.0-next.13
@angular/fire 18.0.1
@angular/google-maps 19.0.0-next.10
@angular/material 19.0.0-next.10
@angular/pwa 19.0.0-next.13
@angular/ssr 19.0.0-next.13
@schematics/angular 18.2.4
rxjs 7.8.1
typescript 5.6.2
zone.js 0.15.0

Anything else?

No response

Metadata

Metadata

Labels

P2The issue is important to a large percentage of users, with a workaroundarea: coreIssues related to the framework runtimecore: hydrationstate: has PR

Type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions