Conflicts with Ionic Beta 2.0.0-beta.6 and ng2-translate 2.0.0 -> No provider for TranslateService!

[rdesimone]

Ionic 2 Beta 2.0.0-beta.6
Angular 2.0.0-beta.15 (comes with Ionic 2)
ng2-translate 2.0.0 (seems to require beta 16)
Node: 5.10.1
npm: 3.8.3

UNMET PEER DEPENDENCY reflect-metadata@0.1.2
UNMET PEER DEPENDENCY zone.js@^0.6.10
npm ERR! peer dep missing: angular2@>= 2.0.0-beta.16, required by ng2-translate@2.0.0
npm ERR! peer dep missing: reflect-metadata@0.1.2, required by angular2@2.0.0-beta.15
npm ERR! peer dep missing: zone.js@^0.6.10, required by angular2@2.0.0-beta.15

Anyhow from curiosity I continued following the Ionic 2 Bootstrap

import {App, IonicApp, Platform, MenuController} from "ionic-angular";
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {provide} from 'angular2/core';
import {TranslateService, TranslateLoader, TranslateStaticLoader, TranslatePipe} from 'ng2-translate/ng2-translate';


@App({
  templateUrl: '....',
  config: {},
  providers: [
    provide(TranslateLoader, {
      useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
      deps: [Http]
    }),
    TranslateService
  ],
  pipes: [TranslatePipe]
})

export class MyApp {
    rootPage:any = LoginPage;

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

        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.initializeTranslateServiceConfig() ;
    }

    initializeTranslateServiceConfig() {
        var userLang = navigator.language.split('-')[0]; // use navigator lang if available
        userLang = /(fr|en|de)/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);
    }
}

Getting this exception in the console: No provider for TranslateService!

Thanks a lot for your help!

[chl03ks]

ng2-tanslate 2.0.0 now only works with beta >=16 because of a change in pipe arguments
38ec3f1a

maybe you'll need to update your angular to beta.16 and also zone.js to 0.6.12

[rdesimone]

Thanks, I am supposing this. Is there a way to install a lower version? Asked differently: how to make it work with the latest Ionic 2 Beta 6 which uses angular 15?

[chl03ks]

@rdesimone i was using v1.11.1 with beta.15 and it was working fine maybe downgrade your npm version of ng2-translate to ^1.11.1

[rdesimone]

@gvsdan I installed 1.11.1 but I end with the same exception: EXCEPTION: No provider for TranslateService!

[ocombe]

Yes, v1.11.1 is the last version usable with beta < 16 because of the breaking change in pipes.
The "No provider" exception means that you don't instantiate the service in bootstrap or one of your parent components, but when I look at the code snippet above it looks fine and should be working :(

[rdesimone]

@ocombe thanks for reviewing - yes I think the code is following your docs. Any further ideas?

see also the installed packages:

├── angular2@2.0.0-beta.15
├── del@2.2.0
├── es6-shim@0.35.0
├── gulp@3.9.1
├── gulp-watch@4.3.5
├── ionic-angular@2.0.0-beta.6
├── 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@1.0.1
├── ionic-native@1.1.1
├── ionicons@3.0.0-alpha.3
├── ng2-translate@1.11.1
├── UNMET PEER DEPENDENCY reflect-metadata@0.1.2
├── run-sequence@1.1.5
├── rxjs@5.0.0-beta.2
└── UNMET PEER DEPENDENCY zone.js@^0.6.10

[ocombe]

It's not an issue with the packages, this is an issue with the code but I'm not sure why

[rdesimone]

OK, thanks - let me know if I can provide further information.

[rdesimone]

@ocombe I noticed that there is a version ng2-translate@1.11.3 now.

The described issues disappeared with this new package. However, I am facing problems with Pipes now. See source above for bootstrap.

`<ion-tab [root]="tab1Root" tabTitle={{'Card' | translate}} tabIcon="card">``

en.json:

{
  "Card" : "Card",
  "History" : "History",
  "Account" : "Account",
  "Info" : "Info"
}

The console displays this error:

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Unexpected closing tag "ion-tab" ("s" (change)=onChange()>
  <ion-tab [root]="tab1Root" tabTitle={{'Card' | translate}} tabIcon="card">[ERROR ->]</ion-tab>

[rdesimone]

@ocombe I think this is related to a problem with the ion-tab - it seems that pipes cannot be used there.

[saurabhvyas]

Same here unexpected closing tag

[webprofusion-chrisc]

Hi, further to this, for anyone looking to translate tabs etc. Remember to include a reference to the TranslateService in the Tab component:

@Component({
    templateUrl: 'build/pages/tabs/tabs.html',
    pipes: [TranslatePipe]
})

Then in your tab you need one-way binding to get the expression to work:

    <ion-tab [root]="tabProfile" [tabTitle]="'ocm.navigation.profile.sectionTitle'|translate" tabIcon="person"></ion-tab>

[srikanth748]

I was able to implement translate in my Ionic2 app and it works quite well but the issue is I am unable to implement on the tabs components .

<ion-tabs>
  <ion-tab  *ngFor="let tab of tabs" [root]="tab.root" [tabTitle]= "tab.name" [tabIcon]="tab.icon">
  </ion-tab>
</ion-tabs>

I wanted to implemented like this [tabTitle]= "tab.name | translate " .
I tried few workarounds : [tabTitle]= {{"tab.name" | translate }} ,
[tabTitle]= {{'tab.name' | translate }} ,
[tabTitle]= 'tab.name' | translate ,

But neither of them worked .
So i would know if somebody implemented this .Thanq

[ocombe]

Hmm [tabTitle]= "'tab.name' | translate" should work, I use bindings like this all the time

[srikanth748]

I tried this one too and the result i see on my app is on each tab it shows -- tab.name .Probably it took the whole binding with in double quotes as a string so it didnt work .