14

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?

Adnan Senyurt
  • 177
  • 1
  • 2
  • 6

2 Answers2

38

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)

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

Smaillns
  • 2,540
  • 1
  • 28
  • 40
  • 7
    Can you share your code instead of an image as it's hard to copy – Black Mamba Apr 10 '18 at 12:00
  • 1
    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 – Amit Gandole Aug 01 '19 at 05:56
28

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 { }
nqngo
  • 289
  • 2
  • 3