Translation not working in ionic modal

Question

I'm taking over the code of a small application witl Ionic v2, and I'm using ng2-translate for my translations. I have an issue with translations only in a modal window. It works very well everywhere, except on this modal, where I can only see the transaltion keys.

Here is my AppModule :

@NgModule({
  declarations: [
    MyApp,
    // ...
    SearchPersonModal
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    ChartModule,
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    // ...
    SearchPersonModal,
  ],
  providers: [
    ApiCaller
  ]
})
export class AppModule {}

The modal is used in the application for searching a user in the remote database. Here is the code of the modal component :

@Component({
  selector: 'page-search-person',
  templateUrl: 'search-person.html',
})
export class SearchPersonModal {

  public caller : ApiCaller = null;
  public translate : TranslateService = null;

  // ..

  constructor(
    public viewCtrl: ViewController,
    public toastr: ToastController,
    params: NavParams
  ) {
    this.translate = params.get('translate');
    this.caller = params.get('caller');
  }

  // ...
}

And here is how the modal is presented :

let modal = this.modalCtrl.create(SearchPersonModal, {
  caller: this.caller,
  translate : this.translate
});

I think that the author of the code passed the services as parameters because dependency injection didn't work. In fact, when I try to do so, with this constructor :

export class SearchPersonModal {

  //public caller : ApiCaller = null;
  //public translate : TranslateService = null;

  // ...

  constructor(
    public viewCtrl: ViewController,
    public toastr: ToastController,
    public caller: ApiCaller,
    public translate: TranslateService,
    params: NavParams
  ) {
    //this.translate = params.get('translate');
    //this.caller = params.get('caller');
  }

  // ...
}

the translation still doesn't work, but the ApiCaller service works as expected. Why this service works well, but not the translator ?

Answer 1

It seems that this is a currently known issue with Ionic 2 and has been reported on their repo. The workaround is that the translate service needs to be re-initialised for the modal as stated in the issue log:

Things work on pages, but do not work inside modals. It's as if the translate service is not available inside the modal. If, inside the modal, I re-initialize the translate service by running this.translate.use('fr'); then things work fine. The following code, for example, works fine.

import { TranslateService } from 'ng2-translate/ng2-translate';

@Component({
  templateUrl: 'my-modal.html',
  selector: 'my-modal',
})

export class MyModal {
constructor(
    private translate: TranslateService
  ) {
    var self = this;
    this.translate.use('fr');  // Re-initializing the translate service inside a modal
    // Here on translation works fine
  }
}

So this workaround mapped to your current implementation should be similar to this:

import { TranslateService } from 'ng2-translate/ng2-translate';

export class SearchPersonModal {

  public caller : ApiCaller = null;
  public translate : TranslateService = null;

  // ...

  constructor(
    public viewCtrl: ViewController,
    public toastr: ToastController,
    public caller: ApiCaller,
    private translate: TranslateService
    params: NavParams
  ) {
    this.caller = params.get('caller');
    this.translate.use('en'); // Re-initialised rather than passed via navParams.
  }

  // ...
}