ngx-translate / core

The internationalization (i18n) library for Angular
MIT License
4.51k stars 575 forks source link

The TranslateService is undefined in the constructor #166

Closed ebors closed 7 years ago

ebors commented 8 years ago

Im using IONIC v2

{
  "dependencies": {
    "@angular/common": "2.0.0-rc.1",
    "@angular/compiler": "2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/http": "2.0.0-rc.1",
    "@angular/platform-browser": "2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
    "@angular/router": "2.0.0-rc.1",
    "es6-shim": "^0.35.0",
    "ionic-angular": "2.0.0-beta.9",
    "ionic-native": "1.2.4",
    "ionicons": "3.0.0",
    "nativescript-ng2-translate": "^1.1.0",
    "ng2-translate": "^2.2.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "^1.1.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^2.0.0",
    "run-sequence": "1.1.5"
  },
  "name": "pj2",
  "description": "PJ2: An Ionic project",
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": []
}

And my app.ts is:

`import {Component, ViewChild} from '@angular/core';
import {App, Platform, ionicBootstrap,  MenuController, Nav} from 'ionic-angular';
import {provide} from '@angular/core';
import {Http, HTTP_PROVIDERS} from '@angular/http';
import {TRANSLATE_PROVIDERS, TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {RestaurantTipsPage} from './pages/restaurant-tips/restaurant-tips';
import {ShoppingTipsPage} from './pages/shopping-tips/shopping-tips';
import {TravellingPage} from './pages/travelling/travelling';
import {Trekking2Page} from './pages/trekking/trekking';
import {WeatherPage} from './pages/weather/weather';
import {ActactivitiesPage} from './pages/actactivities/actactivities';

/*
@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})*/
@Component({

  templateUrl: 'build/app.html',
  providers: [
    {
      provide: TranslateLoader,
      useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
      deps: [Http]
    },
    TranslateService
  ]

})
export class MyApp {

  rootPage:any = TabsPage;
  pages: Array<{title:string, component:any, icon:string}>;
  @ViewChild(Nav) nav: Nav;

  static get parameters() {
    return [[Platform], [MenuController]];
  }

  constructor(private platform:Platform, private menu: MenuController,private translate: TranslateService ) {

    this.menu = menu;

    this.pages = [
      {title: 'Home', component: TabsPage, icon:'home'},
       ];

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });

    //this.translateConfig();
  }

  openPage(page) {
    // close the menu when clicking a link from the menu
    this.menu.close();
    // navigate to the new page if it is not the current page
    this.nav.setRoot(page.component);
  }

  translateConfig(){
    var userLang = navigator.language.split('-')[0]; // use navigator lang if available
    userLang = /(de|en|es)/gi.test(userLang) ? userLang : 'en';

    // this language will be used as a fallback when a translation isn't found in the current language
    this.translate.setDefaultLang('en');

    // the lang to use, if the lang isn't available, it will use the current loader to get them
    this.translate.use(userLang);
  }
}

//ionicBootstrap(MyApp)

ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

`

The translate object in the constructor is undefined. Where to check it, why is this object not initialized? Thanx

SellvakumarSS commented 8 years ago

Am also facing the issue. Plz update.

ocombe commented 7 years ago

Closing this old issue, let me know if I should reopen it. If you need help with the setup of ng2 translate for ionic, there's an example in the repo.