On refresh of browser for angular application, i18n folder problem

Question

I am running the application through npm run watch which starts node server in a seperate port and angular application in different port. The assets folder is also there which contains i18n folder for language implementation and is inside src folder. I am having en.json and fr.json files inside i18n folder, which I use through ngx-translate module. When I refresh the browser, the language is not being rendered properly. I am using setdefaultlang as en but on refresh the keys of en.json comes instead of values of keys.But when I navigate it renders fine. What can be the problem or what should I do?

Answer 1

Your problem is that the json file has not yet reached your application.

Check git issue here. There is the same problem. Then the json comes to your application and so the transations are available.

The fix from redirect can be found here

Basically it's the following:

providers: [
  {
    provide: APP_INITIALIZER,
    useFactory: appInitializerFactory,
    deps: [TranslateService, Injector],
    multi: true
  }
]

And define factory function appInitializerFactory upper in the same file:

import { Injector, APP_INITIALIZER } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { LOCATION_INITIALIZED } from '@angular/common';

export function appInitializerFactory(translate: TranslateService, injector: Injector) {
  return () => new Promise<any>((resolve: any) => {
    const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null));
    locationInitialized.then(() => {
      const langToSet = 'en-GB'
      translate.setDefaultLang('en-US');
      translate.use(langToSet).subscribe(() => {
        console.info(`Successfully initialized '${langToSet}' language.'`);
      }, err => {
        console.error(`Problem with '${langToSet}' language initialization.'`);
      }, () => {
        resolve(null);
      });
    });
  });
}