Skip to content

Incremental hydration : @defer (hydrate on immediate) is never triggered on a routed component #59997

@jimjim2a

Description

@jimjim2a

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

core, platform-server

Is this a regression?

No

Description

Hello everyone,

It seems that for some reason the hydrate on immediate hydrate trigger never fires when used inside a routed component (eager or lazy loaded).

On this repo https://github.com/jimjim2a/loadcomponent-hydration you will find a very simple project structured with incremental hydration enabled.

I only have a single route pointing to the Contact component.

When the component is loaded like this :

export const routes: Routes = [{
     path: 'contact', pathMatch: 'full', component: ContactComponent
 }];

the hydrate on immediate trigger doesn't fire.

It's the same when the route is lazy loaded :

export const routes: Routes = [{
    path: 'contact', pathMatch: 'full', loadComponent: () => import('./contact/contact.component').then(mod => mod.ContactComponent)
}];

In this case the hydrate on immediate trigger doesn't fire.
Also the hydrate on viewport (when the component is initially on top of the screen and in the viewport) trigger doesn't fire. It does when loading ContactComponent eagerly.

Eager Lazy
Idle ok Idle ok
Viewport ok Viewport ko
Immediate ko Immediate ko

The other triggershydrate on hover, hydrate on interaction, hydrate on timer, hydrate when are all working.

Thx a lot guys !

Please provide a link to a minimal reproduction of the bug

https://github.com/jimjim2a/loadcomponent-hydration

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

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 19.1.7
Node: 20.18.2
Package Manager: npm 10.8.2
OS: darwin arm64

Angular: 19.1.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1901.7
@angular-devkit/build-angular   19.1.7
@angular-devkit/core            19.1.7
@angular-devkit/schematics      19.1.7
@angular/cli                    19.1.7
@angular/ssr                    19.1.7
@schematics/angular             19.1.7
rxjs                            7.8.1
typescript                      5.7.3
zone.js                         0.15.0

Anything else?

No response

Metadata

Metadata

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions