ngx-translate/core "Error: No provider for HttpClient!"

Question

I've downloaded the package ngx-translate/core, and been following the documentation instructions.

I can't get the translation to work. The steps i made:

1] define everything in the AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { TranslateModule } from '@ngx-translate/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { routing } from './app.routes';

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

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

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

2] define everything in AppComponent

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: []
})
export class AppComponent {
  param = { value: 'world' };

  constructor(private router: Router, translate: TranslateService) {
    // this language will be used as a fallback when a translation isn't found in the current language
    translate.setDefaultLang('en');

    // the lang to use, if the lang isn't available, it will use the current loader to get them
    translate.use('en');
  }
}

3] the html

<div>{{ 'HELLO' | translate:param }}</div>

4] And finally created in the assets/i18n/en.json

{
    "HELLO": "Hi There"
}

I keep getting these errors in the screen shot below

What am i doing wrong ?

Thumbscrew

Yiu are missing HttpClientModule from your app imports. – Externality

Answer 1

This ngx-translate/core uses the latest HttpClientModule instead of the old HttpModule change the following in the imports array in NgModule

import { HttpClientModule } from "@angular/common/http";

  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule, // the change from http module
    routing,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ]

See Difference between HTTP and HTTPClient in angular 4? for more details.

Kreiker

Amazing, just added "HttpClientModule" and it worked like a charm. magic . from the harry potter series. – Joiejoin

Answer 2

Make sure you import HttpClientModule in your app.module.ts, to prevent injector provider error. In standalone, you can just add the HttpClientModule in the imports of the decorator of the app.component.ts, this should solve the issue.

Ceciliacecilio