robisim74
Translations blink in SSR (Angular Universal)
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:
- Clone sample repo, run
npm i - Build and run app in SSR mode
npm run build:ssr && npm run serve:ssr - 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
- 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.
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.
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!