NG Frontend: Inconsistent Locale Handling

[bfoese]

Issue

Issue 1:
After installing a second language pack, the user can select a preferred locale on login screen. LanguageStore.languageKey$ is being initialized with the locale the user selected on the login screen and the app and module translations are loaded according to the selected locale. However, the selected locale is being lost on page refresh or when opening a link as a new tab.

Issue 2:
The Angular lib crm/core/app/core contains some custom formatting pipes and services which inject the Angular injection token LOCALE_ID. These pipes and services use the value of LOCALE_ID to format according to the current locale. However, SCRM Angular app never provides a value for that injection token, therefore it will always have the default value en_US. As a consequence, even when the user chose a different locale on login, the translation would be provided in that user preferred locale (until page refresh) but the formatting of dates, numbers, currencies would always be made using locale en_US.

Expected Behavior

The locale that the user logged in with should be maintained across page refreshes. The frontend should be served in that locale.
If SCRM pipes and services rely on LOCALE_ID, then the value LOCALE_ID should be kept in sync with SCRM internal locale state holder LanguageStore.languageKey$, otherwise these SCRM pipes and services should use LanguageStore.languageKey$ instead for figuring out the current locale of the user. But best option would be to keep LOCALE_ID in sync with LanguageStore.languageKey$, to allow developers who extend SCRM frontend to use the standard Angular pipes which also rely on LOCALE_ID.

Actual Behavior

• SCRM Internal locale state holder LanguageStore.languageKey$ looses its state on page refresh and falls back to en_US
• Angular LOCALE_ID not properly initialized and synced with LanguageStore.languageKey$ and always contains en_US independent of the locale the user chose on login screen

Possible Fix

Issue 1:
The preferred locale which the user logged in with, could be stored in backend user preferences, in a cookie or in local/session storage. On app initialization, LanguageStore.languageKey$ should be initialized with the previously stored locale. This would maintain the preferred locale across page refreshes.

Issue 2:
SCRM Angular app needs to provide the initial value for LOCALE_ID and needs to find a way to keep it in sync with LanguageStore.languageKey$:

// scrm app.module.ts
providers: [ { provide: LOCALE_ID, useFactory: ..., } ],

Steps to Reproduce

1. Install second language pack, e.g. German
2. On login screen choose German language and hit login button
3. See frontend being served in German language. Value of LanguageStore.languageKey$ is de_DE. Value of Angular Injection Token LOCALE_ID is en_US, meaning all Angular standard and SCRM custom pipes which rely on LOCALE_ID would use English locale instead of German for formatting.
4. Hit F5 for a page refresh
5. Page is refreshed for current user. User is still logged in, but the page is served in English language and value of LanguageStore.languageKey$ equals en_US even though the user would expect to see German.

Your Environment

• SuiteCRM Version used: 8.0.0-beta3

[johnM2401]

Hey there @bfoese ,

I have given this a try in the full release of Suite8, and it seems the issue may now be resolved.

With a few different language packs, (French, Hebrew, Hungarian), the Language pack seems to stay applied through navigation/page refreshing/browser cache clearing

Would you be able to try this again, and let us know if you are still seeing these issues?

Thank you for raising this!

[bfoese]

Sorry for coming back to it so late. Problem was more on our side. We overwrite some of the SuiteCRM Angular routes to replace the views with custom federated modules and back then we missed to apply some standard SCRM route configuration (BaseModuleResolver, BaseRecordResolver, checkSession property in route data).
With this in place, the locale handling works like a charm. Thanks for your effort.