Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
guybenhemo opened this issue Nov 18, 2024 · 2 comments
Closed

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

guybenhemo opened this issue Nov 18, 2024 · 2 comments
Assignees
@AndrewKushnir
Labels
area: core Issues related to the framework runtime area: i18n Issues related to localization and internationalization core: hydration P2 The issue is important to a large percentage of users, with a workaround state: has PR
Milestone
Backlog

Comments

@guybenhemo
Copy link

guybenhemo commented Nov 18, 2024 •
edited
Loading

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:

angular/packages/core/src/linker/view_container_ref.ts

Line 553 in 92f30a7

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
@pkozlowski-opensource pkozlowski-opensource added area: i18n Issues related to localization and internationalization area: core Issues related to the framework runtime core: hydration labels Nov 18, 2024
@ngbot ngbot bot added this to the needsTriage milestone Nov 18, 2024
@AndrewKushnir AndrewKushnir self-assigned this Nov 20, 2024
@AndrewKushnir AndrewKushnir added the P2 The issue is important to a large percentage of users, with a workaround label Nov 20, 2024
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Nov 20, 2024
AndrewKushnir added a commit to AndrewKushnir/angular that referenced this issue Nov 22, 2024
@AndrewKushnir
fix(core): make component id generation more stable between client an…
b625519 
…d server builds

For components with i18n in templates, the `consts` array is generated by the compiler as a function. If client and server bundles were produced with different minification configurations, the serializable contents of the function body would be different on the client and on the server. This might result in different ids generated. To avoid this issue, this commit updates the logic to not take the `consts` contents into account if it's a function.

Resolves angular#58713.
@AndrewKushnir AndrewKushnir mentioned this issue Nov 22, 2024
Closed
2 tasks
AndrewKushnir added a commit to AndrewKushnir/angular that referenced this issue Nov 22, 2024
@AndrewKushnir
fix(core): make component id generation more stable between client an…
380b2b6 
…d server builds

For components with i18n in templates, the `consts` array is generated by the compiler as a function. If client and server bundles were produced with different minification configurations, the serializable contents of the function body would be different on the client and on the server. This might result in different ids generated. To avoid this issue, this commit updates the logic to not take the `consts` contents into account if it's a function.

Resolves angular#58713.
@AndrewKushnir
Copy link
Contributor

@guybenhemo thanks for reporting the issue and providing very useful info. I've created PR #58813 with the fix.

thePunderWoman pushed a commit that referenced this issue Nov 22, 2024
@AndrewKushnir @thePunderWoman
fix(core): make component id generation more stable between client an…
84f45ea 
…d server builds (#58813)

For components with i18n in templates, the `consts` array is generated by the compiler as a function. If client and server bundles were produced with different minification configurations, the serializable contents of the function body would be different on the client and on the server. This might result in different ids generated. To avoid this issue, this commit updates the logic to not take the `consts` contents into account if it's a function.

Resolves #58713.

PR Close #58813
danymarques pushed a commit to danymarques/angular that referenced this issue Nov 28, 2024
@AndrewKushnir @danymarques
fix(core): make component id generation more stable between client an…
da168f7 
…d server builds (angular#58813)

For components with i18n in templates, the `consts` array is generated by the compiler as a function. If client and server bundles were produced with different minification configurations, the serializable contents of the function body would be different on the client and on the server. This might result in different ids generated. To avoid this issue, this commit updates the logic to not take the `consts` contents into account if it's a function.

Resolves angular#58713.

PR Close angular#58813
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 23, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@AndrewKushnir AndrewKushnir

Labels
area: core Issues related to the framework runtime area: i18n Issues related to localization and internationalization core: hydration P2 The issue is important to a large percentage of users, with a workaround state: has PR
Projects
None yet
Milestone
Backlog
3 participants
@pkozlowski-opensource @AndrewKushnir @guybenhemo
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy