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

[zip-fa]

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

[JeanMeche]

You repro doesn't exibit the issue you are describing. Can you double check ?

Did you forgot the withI18nSupport() initially ? (without it hydration break).

[AndrewKushnir]

@zip-fa thanks for providing a repro! As @JeanMeche mentioned, the problem doesn't seem to exist in the code as is, but when I remove withI18nSupport(), I see the following error:

Error: ASSERTION ERROR: Unable to retrieve hydration info from the
TransferState. [Expected=> null != undefined <=Actual]

Ideally, when i18n blocks are present, but there is no withI18nSupport(), hydration should work as it used to work before: components with i18n blocks should skip hydration. We should also consider producing a console warning in a browser for such cases and suggest adding withI18nSupport() call.

Looking at the HTML output, this is likely a culprit:

<app-test1 _nghost-ng-c1108691119="" ngskiphydration="" ngh="null|0">

i.e. the ngh attribute value contains null, which is likely unexpected and we should look at the serialization code, which appends the ngh attribute. I think the fix would be to avoid appending ngh for those cases (i.e. opt a component out of hydration as it happens prior to v18).

cc @devknoll

[AndrewKushnir]

More info after some additional investigation: here is a unit test (can be added to the packages/platform-server/test/hydration_spec.ts file) that reproduces the issue:

        it('should append skip hydration flag if component uses i18n blocks and no `withI18nSupport()` call present', async () => {
          @Component({
            standalone: true,
            selector: 'app',
            template: '<div i18n>Hi!</div>',
          })
          class SimpleComponent {
            vcr = inject(ViewContainerRef);  // <-- this line triggers the issue 
          }

          const hydrationFeatures = [] as unknown as HydrationFeature<any>[];
          const html = await ssr(SimpleComponent, {hydrationFeatures});
          const ssrContents = getAppContents(html);
          expect(ssrContents).toContain('<app ngh');
        });

The fix would likely be somewhere in the annotateLContainerForHydration function (code), which would need to account for a case when i18n blocks are present, but withI18nSupport() function is not invoked (we have similar checks here).

[zip-fa]

I am 100% sure that 'desktop' block is not removed on my setup - it stays in the DOM tree after initial page render (on first load) while it must be removed.
Tested on safari and chrome on mac os.

[zip-fa]

Added slower video. When screen blinks, i just refresh the page (cmd+r):

2024-05-25.11.03.12.mov

@if (currentBreakpoint() === 'mobile') successfully becomes true on 'mobile screens', but @else block is not removed from DOM tree only after initial page render when hydration active

[JeanMeche]

This is due to the error thrown during hydration

[AndrewKushnir]

@zip-fa FYI, I've created PR #56175 with the fix for the issue described in #56074 (comment). The PR will go through the regular review and testing phases and will be included into one of the next 18.0.x releases. Thank you.