[Solved] Ionic 3 lazy loading - some languages not found

I’m submitting a … (check one with “x”)

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

Current behavior

• 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.

Expected/desired behavior

• Switching from one language file to the other should read from the JSON file and load the translations. Right now the translations object loads as empty when subscribed to translate.onLangChange

Reproduction of the problem

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 translations are located in src/assets/i18n:

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

What is the expected behavior?

• Switching from one language file to the other should read from the JSON file and load the translations. Right now the translations object loads as empty when subscribed to translate.onLangChange

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

ionic serve

• ngx-translate version: 6.0.1

• Angular version: 4.1.2

• Browser: Chrome, Android Web Browser, iOS Safari

[zim-lee]

I have the same problem,but it worked when i imported the TranslateModule twice. app.module.ts:

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

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

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (TranslateLoaderFactory),
        deps: [ Http ]
      }
    })
  ],
  .....
})
export class AppModule {}

app.component.ts:

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private translate: TranslateService) {    
    this.translate.setDefaultLang('ko');
    this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
      console.log("onLangChange", event.translations)
    })
    this.translate.onDefaultLangChange.subscribe((event: LangChangeEvent) => {
      console.log("onDefaultLangChange", event.translations)
    })
  }

shared.module.ts:

import { NgModule } from '@angular/core';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { Http } from '@angular/http';
import {TranslateService} from '@ngx-translate/core';

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

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

export class SharedModule {
}

home.module.ts:

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    SharedModule
  ],
  exports: [
    HomePage
  ]
})
export class HomeModule {}

home.ts:

export class HomePage {
  currentLang: string;
  constructor(public navCtrl: NavController, private translate: TranslateService) {    
    this.currentLang = this.translate.getDefaultLang()
    console.log(this.currentLang)
  }

  chooseLang(e) {
    this.translate.use(this.currentLang)
  }
}

got any better idea?

[chrisvanderkooi]

@zim-lee This solve the issue, thanks so much.

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)