Repository navigation
Hydration doesn't work with lazy-loaded components when using zoneless change detection #62592
Description
Which @angular/* package(s) are the source of the bug?
platform-server, platform-browser, core
Is this a regression?
No
Description
Hey. Angular hydration doesn't work with lazy loaded components.
Start my repro and navigate to http://localhost:4200/non-lazy - you will see this in console:
Angular hydrated 2 component(s) and 12 node(s), 0 component(s) were skipped
But when you go to: http://localhost:4200/lazy, angular doesn't seem to hydrate:
Angular hydrated 1 component(s) and 3 node(s)
Which is clearly visible in devtools:
This issue scales on our large app and causes blocks to re-render (which causes flickering)
Please provide a link to a minimal reproduction of the bug
https://github.com/zip-fa/ng20-hydration-issue
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 20.1.0
Node: 24.2.0
Package Manager: npm 11.3.0
OS: darwin arm64
Angular: 20.1.0
... build, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-server, router, ssr
Package Version
------------------------------------------------------
@angular-devkit/architect 0.2001.0
@angular-devkit/core 20.1.0
@angular-devkit/schematics 20.1.0
@schematics/angular 20.1.0
rxjs 7.8.2
typescript 5.8.3
Anything else?
No response
Activity
[-]Hydration doesn't work with lazy-loaded components[/-][+]Hydration doesn't work with lazy-loaded components when using zoneless change detection[/+]thePunderWoman commentedon Jul 11, 2025
Confirmed that hydration is not working with lazy loaded components when zoneless change detection is used. Hydration does work with zones in this case.
thePunderWoman commentedon Jul 11, 2025
Update: We're not sure what the actual cause is, but we do know that you can work around this issue by putting
provideRouterbefore you `provideClientHydration_ in your app config list. This only affects zoneless apps. We were able to confirm that switching that order does cause hydration to work just fine. We'll look further into why this ordering of providers matters for zoneless apps and how we can fix it.fix(core): fixes race condition for zoneless apps
fix(core): Ensure application remains unstable during bootstrap
fix(core): Ensure application remains unstable during bootstrap
fix(core): Ensure application remains unstable during bootstrap (#62631)
fix(core): Ensure application remains unstable during bootstrap (angu…
angular-automatic-lock-bot commentedon Aug 15, 2025
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.