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?

Variorum

Answer 1

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)

Fantom

Can you share your code instead of an image as it's hard to copy – Crossarm

I am still getting this issue Argument of type '{ provide: typeof TranslateLoader; useFactory: (http: HttpClient) => TranslateHttpLoader; deps: (typeof HttpClient)[]; }' is not assignable to parameter of type 'TranslateModuleConfig'. Object literal may only specify known properties, and 'provide' does not exist in type 'TranslateModuleConfig – Orr

in angular14+, with standalone components, we should add provideHttpClient() to the providers in app.config.ts – Fantom

Answer 2

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

Gonroff