Broken hydration after v17 -> v18 migration if i18n blocks are used #56074
Description
Which @angular/* package(s) are the source of the bug?
core
Is this a regression?
Yes
Description
Imagine this code:
<div>
@if (currentBreakpoint() === 'mobile') {
<div class="mobile" i18n="@@test">
Mobile content
</div>
} @else {
<div class="desktop" i18n="@@test2">
Desktop content
</div>
}
</div>currentBreakpoint signal can be desktop, mobile or tablet. On server it's always set to 'desktop'.
When i add this little line to my component, hydration breaks and 'desktop' div never cleans up on mobile devices after hydration:
private readonly vcr = inject(ViewContainerRef);Video:
2024-05-24.21.24.22.mov
Please provide a link to a minimal reproduction of the bug
https://github.com/zip-fa/ng18-broken-hydration
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 18.0.1
Node: 21.7.3 (Unsupported)
Package Manager: npm 10.5.0
OS: darwin arm64
Angular: 18.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic
... platform-server, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1800.1
@angular-devkit/build-angular 18.0.1
@angular-devkit/core 18.0.1
@angular-devkit/schematics 18.0.1
@angular/cli 18.0.1
@angular/ssr 18.0.1
@schematics/angular 18.0.1
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.6
Warning: The current version of Node (21.7.3) is not supported by Angular.
Anything else?
No response