angular2 translate ionic 2 No provider for Http! (MyApp -> TranslateService -> Http)

Question

I am using ionic2/angular2 and ng2-translate. I get an error of "No provider for Http! (MyApp -> TranslateService -> Http)". I am not using typescript. I believe that this code is in typescript form. can someone help me convert it to javascript. Because i am using javascript for my ionic2 project. here is the code from the documentation of ng2-translate. I am just new to ionic2 and 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
  ]
})

here is my 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

You need to provide HTTP_PROVIDERS :

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

this is how it worked out for me. check out the app.module.ts file

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

you can find a complete repo here: https://github.com/philipphalder/ionic2-rc3-NG2-Translate