Why does this delay happen in the translation of the text using angular universal (ssr)?

[sawa-ko]

When the page is rendering, first the text translation keys appear for a few moments and then the text appears as such, I don't understand why, do I need a configuration to use it with angular universal? Running the normal angular application this does not happen to me.

https://user-images.githubusercontent.com/56084970/126847978-599fe979-158a-40b5-b338-d8fe13f91c1c.mp4

[Romanchuk]

Hello, first of all it can be happened if you are not using APP_INITIALIZER. So UI inits with translation keys and only after it loads dictionaries and you see that switch.

About SSR specifically of course you should configure and prepare your code to run it with SSR. Page response should return html with already translation.

Check your paths to locales

Also you might not using

BrowserModule.withServerTransition({appId: 'app'}),

[sawa-ko]

When I said if I was missing something with ssr I meant about the configuration with i18next, and this is the code I'm using, it's the code from the documentation.

// app.module.ts
// .....
imports: [    
// .....
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    AppRoutingModule,
    HttpClientModule,
    I18NextModule.forRoot(),
// .....
],
// .....
providers: [
// .....
I18N_PROVIDERS
// .....
]

// I18n config
export function appInit(i18next: ITranslationService) {
  return () =>
    i18next
      // .use(LanguageDetector)
      .use(HttpLanguage)
      .init({/* ... */});
}

export function localeIdFactory(i18next: ITranslationService) {
  return i18next.language;
}

export const I18N_PROVIDERS = [
  {
    provide: APP_INITIALIZER,
    useFactory: appInit,
    deps: [I18NEXT_SERVICE],
    multi: true,
  },
  {
    provide: LOCALE_ID,
    deps: [I18NEXT_SERVICE],
    useFactory: localeIdFactory,
  },
];

[Romanchuk]

Check your paths to locales

[sawa-ko]

Check your paths to locales

Everything is fine because if I had the routes of the translations wrong, no translation would work for me, what I don't understand is the delay.

[Romanchuk]

For me it looks like: nodejs does not find locales to render it, but in browser it's ok

[sawa-ko]

But in the console I don't get any file not found error.

[Romanchuk]

@kaname-png There is difference between browser and node file load, so you need to adjust https://www.i18next.com/overview/plugins-and-utils#backends https://github.com/i18next/i18next-fs-backend

[sawa-ko]

This error occurs when I use this plugin.

./node_modules/i18next-fs-backend/esm/fs.cjs:2:10-23 - Error: Module not found: Error: Can't resolve 'fs' in '..\node_modules\i18next-fs-backend\esm'
Did you mean './fs'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (.., node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

[Romanchuk]

"fs" is a core nodejs package, you must have it until you run it in browser I'm closing issue because it is not related to angular-i18next