Ng2-translate not working on device but works on simulators

Ionic Framework ionic-v3
1

I ran into this issue during testing and can’t seem to figure out why it is not working. When I run the following commands:

ionic serve
and test on chrome browser it works well but I have to subscribe to this event to this.translateService.onLangChange.subscribe((event: LangChangeEvent) => { let aboutus: string = this.translateService.instant("menu.mAbout") } to get something like that to work correctly.

ionic cordova run ios works on simulator.

ionic cordova run ios --device does not work.

Using xcode to run also does not work on my iPhone.

My imports:

.....
import { TranslateModule } from 'ng2-translate/ng2-translate';
import { TranslateLoader, TranslateStaticLoader, TranslateService } from 'ng2-translate/src/translate.service';
import { Geolocation } from '@ionic-native/geolocation';
....

My createTranslateLoader

export function createTranslateLoader(http: Http) {
  return new TranslateStaticLoader(http, '/assets/i18n', '.json');
}

imports: [
   .....
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
    }),
  .....
  ],

And finally where I did my initialization. It works already on the browser and on simulator with live reload but not on the device itself.

initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      // setting the default language
      this.translateService.setDefaultLang(defaultLanguage);

      // if this is a cordova application
      if ((<any>window).cordova) {
        Globalization.getPreferredLanguage().then(result => {
          let language = this.getSuitableLanguage(result.value);
        //let language = navigator.language.split("-")[0];
        console.log("This is the language selection from globalization: " + language);
        this.translateService.use(language);
        })
      } else {
        let browserLanguage = this.translateService.getBrowserLang() || defaultLanguage;
        let language = this.getSuitableLanguage(browserLanguage);
        this.translateService.use(language);
      }
    });
  }

Thanks for your help in advance.

2

So it turns out that ionic 3+ does not work with ng2-translate but rather the new ngx-translate. I updated my app to use ngx-translate and now everything looks good. Here is the documentation for anyone who runs into this in the future ngx-translate the new way forward for ionic3+

3 Likes
3

I had the same problem but with ngx-translate. The problem was in my HttpLoaderFactory.

Here’s the before code that didn’t work:

export function HttpLoaderFactory(http: HttpClient) {
  
    return new TranslateHttpLoader(http)
}

And here’s the code that made translations work on device as well:

export function HttpLoaderFactory(http: HttpClient) {
  
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

As you can see, I had to add the path that points to json translation files. All the necessary steps are very well described in the ionic docs for ngx-translate.

1 Like