Translations blink in SSR (Angular Universal)

[dmitriydementor]

Describe the bug I noticed strange translations behaviour in SSR mode. When running in dev mode or without SSR – it's ok, but when I build my application in SSR mode and run it, it looks like translations are retrieved correctly only one time, when I reload page one more time – it doesn't load them on server side and when it comes to the client I see that annoying blink. I prepared sample repo to reproduce it. https://github.com/dmitriydementor/l10n-demo

To Reproduce Steps to reproduce the behavior:

1. Clone sample repo, run npm i
2. Build and run app in SSR mode npm run build:ssr && npm run serve:ssr
3. Open browser on localhost:4000 - app runs correctly and you see console output

   listening on http://localhost:4000
   AppL10Storage created
   read en-US USD
   get http://localhost:4000/assets/i18n/i18n-en-US.json
   write en-US USD
   Angular is running in the development mode. Call enableProdMode() to enable the production mode.
   test cookie undefined

4. Reload page and see that translations are blinking before render, and there are no logs for loading translations

   AppL10Storage created
   Angular is running in the development mode. Call enableProdMode() to enable the production mode.
   test cookie undefined

Expected behavior Translations does't blink

Desktop (please complete the following information):

• Library version: 9
• Angular version: 9
• OS: MacOS
• Browser: All (Chrome, Opera)

Additional context Please suggest a solution, I suppose it can happen because of separate I18nModule, where I configure the library, but I'm not sure that problem is definitely there.

[robisim74]

Hi @dmitriydementor,

thanks for the detailed issue. The blink is due to a bug that did not allow translation during the reloading. It has been fixed in the latest version of the library.

There are three ways:

• Upgrade to Angular v10 and angular-l10n v10 (recommended)
• Or only update angular-l10n to v10 (you will get warnings, but they won't create problems)
• If updating is not an option for you, I can release a patch for v9

Let me know.

[dmitriydementor]

Hi @robisim74 ,

Thanks for providing ways to solve this issue. I'll update to the latest Angular and library version, but having a patch would be a good option for large projects where updating could cause problems and will take a lot of time.

Maybe I'm not the only one who faced the same problem with version 9, so releasing a patch or at least mentioning this issue in readme would be great for developers who use 9.x.x version.

Thank you!

[robisim74]

Closed due to inactivity