Core: Translation not working when compiling with cordova

[rams23]

I'm submitting a ...

[x ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior
Compiling in a ionic project make component not working. Some strings are completely missing (seems service return empty one) other are just resolved as the translation key (default behavior when translation is not found)

Reproduction of the problem
I've just migrated from ng2-translate to ngx-translate. Both running correctly on browser. When i compile the ionic app for android the ngx-translate seems not working, as metioned before. Moving back to the ng2-translate the situation is resolved

• ngx-translate version: 6.0.1

• loader version: 0.03

• Angular version: 2.4.8

[jcbowyer]

Translations are also not working for me in cordova

[SamVerschueren]

Check in the network tab if the files are loaded correctly. Make sure your i18n files are copied over to the ionic build directory as well.

[jcbowyer]

Thanks it seems more complex. It works if I change the language via ux but not if I change the language in the constructor. I can't figure out why. Happy Holidays

[SamVerschueren]

What do you mean with "change the language in the constructor"? Try doing it in ngOnInit.

[jcbowyer]

In my app.component.ts this does not work, the pages all load without error but none of the text is translated in cordova app on windows and android. It works fine in browser.

`  ngOnInit() {
    this.translate.setDefaultLang('en');
    this.translate.use('en');
    this.defaultLanguage = this.platform.lang();

    this.storage.get('language').then((value) => {
      if (value == 'en' || value == 'es') {
        this.translate.use(value);
      } else {
        if (this.defaultLanguage == 'es') {
          this.translate.use('es');
          this.storage.set('language', 'es');
        }
        else {
          this.translate.use('en');
          this.storage.set('language', 'en');
        }
      }
    });
  }

`

The code in a settings page general.ts that works on changing selection. After the change is done in the UX, all the pages show the translation.

  selectLanguage() {
    this.storage.set('language', this.applicationUser.language);
    this.translate.setDefaultLang(this.applicationUser.language);
    this.translate.use(this.applicationUser.language);
  }

I can't figure out how to initialize page translations on Android or Windows. I have not tested IPhone yet.

I am using lazy loaded pages in ionic.

My app.module.ts has this

`
@NgModule({

  declarations: [
    MyApp,  AutosizeDirective  
  ],
  imports: [
    FormsModule,
    BrowserModule,
    HttpModule,
    HttpClientModule,
    UploadModule,
    ChartsModule,
    MomentModule,
    ImageCropperModule,
    BrowserAnimationsModule,
    LazyLoadImageModule,
    IonicStorageModule.forRoot(),
    IonicModule.forRoot(MyApp),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,  
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp 
  ],`

My component module looks like this

@NgModule({
  declarations: [GeneralPage],
  imports: [IonicPageModule.forChild(GeneralPage),
  TranslateModule.forChild({
    loader: {
      provide: TranslateLoader,
      useFactory: createTranslateLoader,
      deps: [HttpClient]
    }
  })],
  exports: [
    GeneralPage
  ]
})
export class GeneralModule { }

[jcbowyer]

I figured it out, i had to change my httploader to

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

Thanks