Frederic Lopes
Aug 9, 2017 · 1 min read

I come back with a solution! On ngx-translate repository they say to import {HttpClientModule, HttpClient} from ‘@angular/common/http’; instead of {HttpModule, Http} from ‘@angular/http’ and type loader parameter with it. This fix the problem and works incredibly well with multiple modules :).

Here is the new app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

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

import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent,
],
imports: [
HttpClientModule, <-- instead of HttpModule
BrowserAnimationsModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient], <-- instead of Http
}
})
],
bootstrap: [AppComponent]
})

export class AppModule { }

Hope it will help those who were stuck.

Frederic Lopes

Written by

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade