ngx-translate/core "Erreur: Aucun fournisseur pour HttpClient!"

Question

J'ai téléchargé le paquet ngx-translate/core et j'ai suivi les instructions de la documentation.

Je n'arrive pas à faire fonctionner la traduction. Les étapes i faites:

1] définie tout en 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] définir tout en 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] le html

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

4] Et enfin créé dans les actifs/i18n/en.json

{ 
    "HELLO": "Hi There" 
} 

Je continue à recevoir ces erreurs dans la capture d'écran ci-dessous

Qu'est-ce que je fais mal?

Answer 1

Cette ngx-translate/core utilise la dernière HttpClientModule au lieu de l'ancien HttpModule modifier les éléments suivants dans le tableau des importations en 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] 
     } 
    }) 
    ] 

Voir Difference between HTTP and HTTPClient in angular 4? pour plus de détails.