ng2-translate requires re-initialization inside modal

[vanjiminster]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I'm using ng2-translate, with a set up exactly as described here: https://ionicframework.com/docs/v2/resources/ng2-translate/

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
  }
}

Expected behavior:
I should not need to re-initialize the translate service inside my modal. I should only need to initialize it once inside app.component.ts.

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

$ ionic info
--------------------------------
--------------------------------

Your system information:

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.1
Gulp local:
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.36
OS:
Node Version: v6.3.1


--------------------------------

Here are some relevant lines from my package.json

  "dependencies": {
    "@angular/common": "2.1.0",
    "@angular/compiler": "2.1.0",
    "@angular/compiler-cli": "0.6.2",
    "@angular/core": "2.1.0",
    "@angular/forms": "2.1.0",
    "@angular/http": "2.1.0",
    "@angular/platform-browser": "2.1.0",
    "@angular/platform-browser-dynamic": "2.1.0",
    "@angular/platform-server": "2.1.0",
    "@ionic/cloud-angular": "^0.7.0",
    "@ionic/storage": "^1.0.3",
    "@types/raven-js": "0.0.17",
    "ionic-angular": "^2.0.0-rc.2-201611100035",
    "ionic-native": "2.2.3",
    "ionicons": "^3.0.0",
    "moment": "^2.15.1",
    "ng2-translate": "^4.2.0",
    "raven-js": "^3.7.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.21"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.36",
    "typescript": "^2.0.3"
  }

[MagnarAr]

I was experiencing the same problem, but got it fixed after adding the TranslateService to providers array.

Try adding to @NgModule providers array TranslateService:

@NgModule {
    ....,
    providers: [..., TranslateService]
}
export class AppModule{}

After doing this, localization is working just fine in modals also.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!