Closed
Description
Run the reproduction (https://github.com/sod/issue-ssr-reproduction-hydrate-never) via ng serve --no-hmr and scroll down. See how angular removes the .invert css block when you reach the end of the page.
CleanShot.2025-05-12.at.11.24.57.mp4
The reproduction looks roughly like this:
@for (item of items; track $index) { <!-- print this 30 times -->
@defer (hydrate on viewport) { <!-- hydrate everything inside on viewport one-by-one -->
<app-on-viewport style="display:block; padding:50px"></app-on-viewport>
@defer (hydrate never) { <!-- but keep this static -->
<app-hydrate-never></app-hydrate-never>
}
}
}
@defer (hydrate on viewport) {
<!-- enabled$ = timer(1).pipe(map(() => false), startWith(true)) // so show, then remove again -->
@if (enabled$ | async) { <!-- when this switches to falsy, the styles of `app-hydrate-never` are removed, even though they are still in use
<app-hydrate-never></app-hydrate-never>
}
}seems to work fine with zone.js
Please provide the environment you discovered this bug in (run ng version)
latest 19 & 20
Angular CLI: 20.0.0-rc.0
Node: 22.15.0
Package Manager: yarn 1.22.22
OS: darwin arm64
Angular: 20.0.0-rc.0
... build, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-server, router, ssr
Package Version
------------------------------------------------------
@angular-devkit/architect 0.2000.0-rc.0
@angular-devkit/core 20.0.0-rc.0
@angular-devkit/schematics 20.0.0-rc.0
@schematics/angular 20.0.0-rc.0
rxjs 7.8.2
typescript 5.8.3
zone.js 0.15.0