Broken hydration after v17 -> v18 migration if i18n blocks are used #56989

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

core

Is this a regression?

Yes

Description

This is a duplicate of #56074
Re-opened because issue still persists. Repro was updated to 18.1.0

Steps to reproduce, NO CODE MODIFICATIONS NEEDED, just clone my repro:

1. ng serve
2. open adaptive screen mode. Set dimensions to be less than 768px, eg:

3. refresh page in adaptive screen mode
4. mobile&desktop content are displayed; html inside @if + @else is rendered simultaneously

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.1.0
Node: 22.4.1
Package Manager: npm 10.8.1
OS: darwin arm64

Angular: 18.1.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, platform-browser, platform-browser-dynamic
... platform-server, router, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1801.0
@angular-devkit/build-angular   18.1.0
@angular-devkit/core            18.1.0
@angular-devkit/schematics      18.1.0
@schematics/angular             18.1.0
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.7

Anything else?

The issue still happens because of this line of code inside component:

  private readonly vcr = inject(ViewContainerRef);

If i remove it - everything works as expected