构建多语言应用时遇HttpClient类型不匹配错误的解决方法

这个错误我之前也碰到过，本质是**@ngx-translate/http-loader的版本和你使用的Angular HttpClient不兼容**导致的，下面给你具体的修复步骤：

错误原因 #

Angular 4.3版本引入了新的HttpClient（位于@angular/common/http）来替代旧的Http服务（位于@angular/http）。而低版本的@ngx-translate/http-loader仍然依赖旧的Http服务，所以当你传入新的HttpClient时，就会出现类型不匹配的报错。

修复步骤 #

1. 升级@ngx-translate/http-loader到适配版本 #

你需要安装支持HttpClient的http-loader版本（3.x及以上）：

• 先卸载旧版本：

  npm uninstall @ngx-translate/http-loader --save
  

• 安装最新兼容版本：

  npm install @ngx-translate/http-loader@latest --save
  

2. 确认AppModule配置正确 #

确保你的模块导入顺序和配置没有问题，HttpClientModule必须在TranslateModule之前导入：

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

// 这个工厂函数的写法保持不变
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule, // 必须优先导入
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 检查Angular版本（可选） #

如果你的Angular版本低于4.3，HttpClient本身就不存在，这种情况要么：

• 升级你的Angular项目到4.3及以上版本（推荐）；
• 改用旧的Http服务（不推荐，因为Http已被Angular废弃）。

内容的提问来源于stack exchange，提问作者Yokesh Varadhan