angular: Angular hydration (SSR) for components that use i18n blocks is skipped

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

localize

Is this a regression?

Description

The benefits of hydration are completely ignored for i18n sites. Most of the content is skipped by hydration and re-rendered

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Each component with :
`` i18n="@@translationKey" `` 
is ignored by hydratation

Please provide the environment you discovered this bug in (run `ng version`)

@angular/cli: "^16.1.0"
@angular/core: "^16.1.1"
Node: v18.13.0

Anything else?

No response

About this issue

Original URL
State: closed
Created a year ago
Reactions: 29
Comments: 20 (7 by maintainers)

Most upvoted comments

Adding hydration support for i18n blocks is very high on our list and we’ll start looking into this soon. We don’t have any ETAs, but we’ll keep this thread updated and share more info once we complete an initial research phase.

+11

AndrewKushnir on Nov 29, 2023

Looking very much forward to hydration support for i18n blocks. I was hoping this would have been included in v17 …

+11

SebastianKohler on Nov 8, 2023

We hardly depend in i18n from angular/core, so waiting for hydration to be supported with i18n too

zip-fa on Jun 22, 2023

Support is coming https://github.com/angular/angular/pull/54823

eneajaho on Mar 12, 2024

@henry-alakazhang i18n adds extra information that complicate the hydration process. We originally did have an error in the case of i18n being detected, but we updated it to check if i18n exists and automatically switch to ngSkipHydration for i18n blocks. So you won’t see an error, but any nodes that have i18n information are automatically opted out of hydration. There’s an ongoing investigation to add real hydration support for i18n. So, feel free to keep watching this bug for updates.

jessicajaniuk on Feb 20, 2024

Thank you for your patience, everyone. Now that #55130 has landed, you can enable the developer preview for i18n hydration support in the latest pre-release (v18.0.0-next.4) by using:

import {
  bootstrapApplication,
  provideClientHydration,
  withI18nSupport,
} from '@angular/platform-browser';
...
bootstrapApplication(AppComponent, {
  providers: [provideClientHydration(withI18nSupport())]
});

Please give it a try and let us know how it goes!

devknoll on Apr 16, 2024

Hi - I’m kind of curious, actually - what about i18n blocks doesn’t work with hydration? My understanding of the default compile-time localization setup is that it builds separate assets for both the browser and server, where each locale is functionally the same as another with different text.

I actually tried patching @angular/core to remove the hasI18n() check in hydration/annotate.ts, and server-side rendering + hydration + i18n still worked fine for my application. #49722 suggests that it should throw an error, but it in fact does not.

Are there specific other edge cases that have issues and require it to be disabled? Admittedly, our Angular SSR setup is a bit different from the default (we have all SSR locales loaded from one express server), so it may be something we’ve done by accident. Thanks!

henry-alakazhang on Feb 15, 2024

@karimzg thanks for creating a ticket. Currently, components with i18n blocks are skipped by hydration, we’ve documented it in the hydration guide. We plan to improve hydration to support components with i18n, but there is no exact ETA yet. I’ll keep this ticket open for now and we can use it to collect the signal from the community and share updates from the Angular side.

AndrewKushnir on Jun 22, 2023