Ngx-translate and Ionic 3?

Ionic Framework ionic-v3
21

the issue is after set language it shows keys instead translation. and with next app session it shows translation as well… it seems working if app is reload. i am using lazy loading FYI.

22

still think you should use this.translate.use at loading time

otherwise no idea sorry

23

other people seems having the issue https://github.com/ngx-translate/core/issues/574

1 Like
24

i have updated my language module and this worked for me, not sure if this is right way but it’s worked.

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LanguagePage } from './language';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpModule,Http } from '@angular/http';

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

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

i have added loader for child and export TranslateHttpLoader in language.module.ts

language.ts

langselect(form: NgForm){
  	let langselcode = this.langform.value.langcode;
  	this.storage.set('AppLangcode', langselcode);
  	this.translate.use(langselcode);
  }
2 Likes
25

I have been dealing with the same issue for last 2 days.
Above solution worked for me.

Thanks sonuyadav

1 Like
26

Did you add

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

In the app.module.ts

27

Yes i did add this in app.module.ts and language.module.ts both, it need to add for forRoot in app.module.ts and for forChild in language.module.ts

28

More Updates are Ngx-translate and lazy loading - some languages not found

29

Thanks, that solution helped.

30

This is not working with ionic 3.9.2 and angular 5.0.1. ngx translate is broken when using lazy loading. Tons of issues pending on the github repo and it seems that the main developer isn’t focusing on his repo anymore because he is with the angular core them now.
I hope Ionic will help us use the native i18n instead of ngx translate.
Please!!!

31

@lolaswift1 not agree sorry, it still works like a charm (ionic-angular 3.9.2, angular 5.0.0, ngx-translate 8.0.0, lazy loading on, app live with these in stores)

if you’ve got problem with your app, have you created a post about it?

32

Could you please share which version of ngx-translate/core and ngx-translate/http-loader you’re using?

33

I was able to successfully get translations working by following this post: Ngx translate is broken when used with ionic lazy loading

34

I tried the code wherein I am using lazy loading to load pages and also translating the stuffs as required: https://github.com/dmkdfc/IonicMultiLanguage.git