Ngx-translate and lazy loading - some languages not found

Ionic Framework ionic-v3
1

I am using Ionic 3 lazy loaded modules with ngx-translate. I am having an issue where most of my languages .json translation files aren’t being loaded when I switch to them. Might be an Ionic lazy loading issue so I decided to post here.

in my main module (app.module.ts):

// AoT requires an exported function for factories
export function createTranslateLoader(http: Http) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
    declarations: [...],
    imports: [
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [Http]
          }
        })
    ]
})

In my main component (app.component.ts):

constructor(translate: TranslateService) {
    translate.addLangs(['en', 'fr', 'es', 'hi']);
    translate.setDefaultLang('en');
    translate.use('es');
    // Listen for changes
    translate.onLangChange.subscribe((event:LangChangeEvent) => {
       console.log('onLangChange', event.translations));
    }
}

Then I have a page set up where I can change the language (settings.ts):

constructor(public translate: TranslateService) {}

changeLang(value:string) {
    this.translate.use(value);
}

My issue is that when I switch to the language en or es, the language translations load as I can see in translate.onLangChange, but when I try the other languages that are not in my main app component as default or use, the translations are an empty object… I really can’t figure out why.

My translations are located in src/assets/i18n:

en.json
es.json
fr.json
hi.json

Anyone have any experience with ngx-translate and ionic3? I followed the ngx-translate guide multiple times. Just seems like if the language is not used immediately, the language cannot be loaded after the the app is ready.

3 Likes
2

i am also getting similar issue Ngx-translate and Ionic 3?

3

i have posted my solution Ngx-translate and Ionic 3?

4

This solved the issue. Thank you sonuyadav!

However - a few things:

  • 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()

  • Instead of having 2 TranslateLoaderFactory… you can just import the factory from your app.module.ts

So in the settings.ts page where I have the control to change the language I have this:

...
import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
import {createTranslateLoader} from "../../app/app.module";
import {Http} from "@angular/http";

@NgModule({
  declarations: [...],
  imports: [
    IonicPageModule.forChild(SettingsPage),
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    })
  ],
  exports: [...]
})

and then of course the default set up stuff in the app.module and app.component files. (Link to Ionic ngx-translate setup guide)

3 Likes