Skip to content

Angular Hydration for i18n inside router-outlet not working in production build #58713

@guybenhemo

Description

@guybenhemo

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

Don't known / other

Is this a regression?

No

Description

Components with i18n that is being rendered using router, won't hydrate correctly for production build (works great for development build)

Added hydration for i18n views: provideClientHydration(withI18nSupport()),

The Hydration process is trying to match the ids of the components from the server build and the browser build:

const dehydratedView = findMatchingDehydratedView(this._lContainer, componentDef?.id ?? null);

The component id is being calculated from hash of the component build attributes.
One of those attributes is consts attribute.

When building angular server and browser with optimization = true, the consts attribute is different between the server and the browser build,
causing a mismatch of the ids of the same element, which resulting in hydration skipping.

The server build and the client build consts attribute are not the same because in the browser build there is mangling = true, while in the server build the mangling = false

As you can see mangling = false for server build in optimization = true, but true for browser:
https://github.com/angular/angular-cli/blob/2e43ec6654d7b4a068ed3aea87b8f804e4c2c5f0/packages/angular_devkit/build_angular/src/tools/webpack/configs/common.ts#L308

Example of consts attributes difference between the builds, for this i18n div:

<div class="header" i18n="@@About.Header">Header</div>

Server build:
consts:()=>{let i18n_0;return i18n_0="About",[i18n_0,[1,"header"]]}

Browser build:
consts:()=>{let o;return o="About",[o,[1,"header"]]}

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw


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

Angular CLI: 18.2.12
Node: 22.11.0
Package Manager: npm 10.2.4
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1802.12
@angular-devkit/build-angular   18.2.12
@angular-devkit/core            18.2.12
@angular-devkit/schematics      18.2.12
@schematics/angular             18.2.12
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.14.10

Anything else?

No response

Metadata

Metadata

Assignees

Labels

P2The issue is important to a large percentage of users, with a workaroundarea: coreIssues related to the framework runtimearea: i18nIssues related to localization and internationalizationcore: hydrationstate: has PR

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions