Angular universal and ngx translate showing translation keys when rendering the page

I am building bilingual webpage with Angular and I am using ngx-translate. However, when rendering Server Side, it first shows JSON keys and only later the language. I know the problem might be that translations are not yet loaded when the page initially renders. But I could not find answer to the question how I can ensure that translation files are being preloaded and available on the server-side? How can I preload the files before rendering the Angular Application?

I have researched a lot and I found solution with using transferstate but it did not solve my issue. You can see what I tried here: https://andremonteiro.pt/ngx-translate-angular-universal-ssr/ . Thanks in advance.

Continue reading...