Ngx translate is broken when used with ionic lazy loading

I found something interesting:

Only the page that is changing the language needs to have the second loader in it:
(TranslateModule.forChild({…}). All other pages just need TranslateModule.forChild()

I think that your problem is the following: in the pages where the user could change the language, you need to define again your loader

To do so, in home.module.ts add

export function createTranslateLoader(http: HttpClient) {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
...
TranslateModule.forChild({
    loader: {
      provide: TranslateLoader,
      useFactory: createTranslateLoader,
      deps: [HttpClient]
    }
  }

or, as @ccdex_chris said in his post, you could also import your loader from your app.module.ts, like

import {createTranslateLoader} from "../../app/app.module";
....
TranslateModule.forChild({
    loader: {
      provide: TranslateLoader,
      useFactory: createTranslateLoader,
      deps: [HttpClient]
    }
  }
5 Likes