angular2 translate ionic 2 Kein Anbieter für Http! (MyApp -> TranslateService -> Http)

Question

Ich verwende ionic2/angular2 und ng2-translate. Ich bekomme einen Fehler von "Kein Provider für Http! (MyApp -> TranslateService -> Http)". Ich benutze kein Typoskript. Ich glaube, dass dieser Code in Schreibmaschinenform ist. kann mir jemand helfen, es in Javascript zu konvertieren. Weil ich Javascript für mein ionic2 Projekt verwende. Hier ist der Code aus der Dokumentation von ng2-translate. Ich bin nur neu bei ionic2 und angular2.

import {provide} from '@angular/core'; 
import {TranslateService, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate'; 

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

hier ist mein app.js

import {App, IonicApp, Platform, Storage, SqlStorage} from 'ionic-angular'; 
import {StatusBar} from 'ionic-native'; 
import {MainPage} from './pages/main/main'; 
import {TabsPage} from './pages/jeepney/tabs/tabs'; 
import {LandingPage} from './pages/landingpage/landingpage'; 
// import {JeepneyRoutesPage} from './pages/jeepney/jeep-routes/jeep-routes'; 
// import {ListPage} from './pages/list/list'; 

import {DataService} from './services/data'; 

import {ConnectivityService} from './providers/connectivity-service/connectivity-service'; 
import {GoogleMapsService} from './providers/google-maps-service/google-maps-service'; 

import {LoadingModal} from './components/loading-modal/loading-modal'; 

import {provide} from 'angular2/core'; 
import {Http, HTTP_PROVIDERS} from 'angular2/http'; 
import {TranslateService, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate'; 



@App({ 
    templateUrl: 'build/app.html', 
    providers: [DataService,ConnectivityService, 
    HTTP_PROVIDERS, 
    provide(TranslateLoader, { 
     useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'), 
     deps: [Http] 
    }), 
    TranslateService], 
    directives: [LoadingModal], 
    config: { 
    iconMode: 'md', 
    modalEnter: 'modal-slide-in', 
    modalLeave: 'modal-slide-out', 
    pageTransition: 'ios', 
    tabSubPages: false, 
    backButtonIcon: 'ios-arrow-back', 
    tabbarPlacement: 'top', 
    backButtonText: '' 
    // menuType: 'reveal' 
    } // http://ionicframework.com/docs/v2/api/config/Config/ 
}) 
class MyApp { 
    static get parameters() { 
    return [[IonicApp], [Platform],[TranslateService]]; 
    } 

    constructor(app, platform,translate) { 
    this.translate=translate; 
    // set up our app 
    this.app = app; 

    this.platform = platform; 
    this.initializeApp(); 
    // make HelloIonicPage the root (or first) page 
    this.rootPage = LandingPage; 
    // this.initializeTranslateServiceConfig(); 
    var userLang = navigator.language.split('-')[0]; // use navigator lang if available 
    userLang = /(fr|en)/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); 
    } 

    initializeTranslateServiceConfig() { 
    var prefix = 'assets/i18n/'; 
    var suffix = '.json'; 
    this.translate.useStaticFilesLoader(prefix, suffix); 

    var userLang = navigator.language.split('-')[0]; 
    userLang = /(de|en|hr)/gi.test(userLang) ? userLang : 'en'; 

    this.translate.setDefaultLang('en'); 

    this.translate.use(userLang); 
} 

    initializeApp() { 
    this.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.storage = new Storage(SqlStorage); 
     // this.storage.query('CREATE TABLE IF NOT EXISTS people (id INTEGER PRIMARY KEY AUTOINCREMENT, firstname TEXT, lastname TEXT)').then((data) => { 
     //  console.log("TABLE CREATED -> " + JSON.stringify(data.res)); 
     // }, (error) => { 
     //  console.log("ERROR -> " + JSON.stringify(error.err)); 
     // }); 

    }); 
    } 

} 

Answer 1

Sie müssen HTTP_PROVIDERS bieten:

import {HTTP_PROVIDERS, Http} from '@angular/http'; 

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

Answer 2

dies ist, wie es für mich gearbeitet. Check-out die app.module.ts Datei

import { NgModule, ErrorHandler } from '@angular/core'; 
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 
import { MyApp } from './app.component'; 
import { HomePage } from '../pages/home/home'; 

import { TranslateModule, TranslateStaticLoader, TranslateLoader } from 'ng2-translate/ng2-translate'; 
import { Http } from '@angular/http' 

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

@NgModule({ 
    declarations: [ 
    MyApp, 
    HomePage 
    ], 
    imports: [ 
    IonicModule.forRoot(MyApp), 
    TranslateModule.forRoot({ 
     provide: TranslateLoader, 
     useFactory: (createTranslateLoader), 
     deps: [Http] 
    }) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    HomePage 
    ], 
    providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}] 
}) 
export class AppModule {} 

Sie hier ein komplettes Repo finden: https://github.com/philipphalder/ionic2-rc3-NG2-Translate