Angular 4 ngx翻译错误：HttpClient没有提供程序

我在Angular 4应用程序中实现ngx翻译。Im收到“错误：HttpClient没有提供程序”

使用的版本：

"@ngx-translate/core": "^7.0.0",
"@ngx-translate/http-loader": "^0.1.0",

 and also tried with version

"@ngx-translate/core": "^8.0.0",
"@ngx-translate/http-loader": "^2.0.0",

但仍然是相同的错误，我的app.module.ts如下所示

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

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

@NgModule({
  declarations: [ ... ],
  imports: [
    ...,
    HttpClientModule,
    HttpModule,
    ...,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
  ],
  exports: [TranslateModule],
  providers: [..., HttpClient,TranslateService],
 })

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

constructor( ..., public translate: TranslateService) {
    translate.setDefaultLang('en');
    translate.use('en');
  }

  switchLanguage(language: string) {
    this.translate.use(language);
  }

我的app.component.ts是这样的

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

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

@NgModule({
  declarations: [ ... ],
  imports: [
    ...,
    HttpClientModule,
    HttpModule,
    ...,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
  ],
  exports: [TranslateModule],
  providers: [..., HttpClient,TranslateService],
 })

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

constructor( ..., public translate: TranslateService) {
    translate.setDefaultLang('en');
    translate.use('en');
  }

  switchLanguage(language: string) {
    this.translate.use(language);
  }

有人能帮忙吗