-
Notifications
You must be signed in to change notification settings - Fork 27k
Description
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