Skip to content

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

Closed
Closed
Broken hydration after v17 -> v18 migration if i18n blocks are used#56074
Labels
P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: coreIssues related to the framework runtimearea: i18nIssues related to localization and internationalizationcore: hydrationstate: confirmedstate: has PR
Milestone
Backlog

Description

@zip-fa
zip-fa
opened on May 24, 2024

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: coreIssues related to the framework runtimearea: i18nIssues related to localization and internationalizationcore: hydrationstate: confirmedstate: has PR

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions