ngx-translate/core "Błąd: brak dostawcy dla HttpClient!"

Question

Pobrałem pakiet ngx-translate/core i postępowałem zgodnie z instrukcjami dotyczącymi dokumentacji.

Nie mogę uzyskać tłumaczenia do pracy. Etapy i wykonane:

1] określenie wszystko w 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] określenia wszystko w 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] html

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

4] I wreszcie stworzone w aktywach/i18n/en.json

{ 
    "HELLO": "Hi There" 
} 

wciąż otrzymuję te błędy w zrzucie ekranu poniżej

Co robię źle?

Answer 1

Ten ngx-translate/core wykorzystuje najnowszą HttpClientModule zamiast starego HttpModule zmian następujących w tablicy importu w 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] 
     } 
    }) 
    ] 

Zobacz Difference between HTTP and HTTPClient in angular 4? więcej szczegółów.