Argument of type 'Http' is not assignable to parameter of type 'Http' in Ionic ngx-translate

Question

I'm developing an Ionic 2 mobile app and want to use ngx-translate features. Following the tutorial, I'm importing necessary files in app module like this:

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpModule, Http } from '@angular/http';
...

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

which gives the error:

 Argument of type 'Http' is not assignable to parameter of type 'Http'.
 Property 'handler' is missing in type 'Http'

I think there is a mismatch of packages expected by ngx-translate but i cannot figure out what and how. My @angular/http version is 4.3.2 Has anybody an idea what to do?

Answer 1

Try using HttpClient

import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {AppComponent} from "./app.component";

export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

@NgModule({
    declarations: [
        AppComponent
      ],
    imports: [
        BrowserModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

the problem is due to a conflict version, maybe you installed a "^1.0.2" version of "@ngx-translate/http-loader" althought your function is available for a previous version. don't worry! you have just to use HttpClient instead of Http ..

don't forget to change the value of 'deps' constant and import the HttpClientModule in your module (or in your app.module)