升级Angular 5后遇NgModule异常：HttpClient导入报错求解决

这个问题我之前帮不少开发者排查过，核心原因是你搞混了HttpClient和HttpClientModule的角色——HttpClient是一个服务类，不是NgModule，不能直接加到模块的imports数组里，这就是你看到错误的根源。

下面是具体的修复步骤：

1. 修正模块中的导入语句
   检查你的AppModuleShared，如果之前写了这样的导入：

   import { HttpClient } from '@angular/common/http';
   

   请把它替换成：

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

2. 更新模块的imports数组
   在@NgModule的imports里，把原来的HttpClient换成HttpClientModule：

   @NgModule({
     declarations: [
       // 你的组件、指令、管道
     ],
     imports: [
       // 其他已导入的模块（比如BrowserModule、FormsModule等）
       HttpClientModule // 这里放的是模块，不是服务类
     ],
     providers: [
       // 你的服务
     ]
   })
   export class AppModuleShared { }
   

3. 在需要的地方注入HttpClient服务
   如果你要在组件或服务里使用HttpClient，只需要在对应的类中通过依赖注入引入即可，不需要在模块里导入服务本身：

   import { HttpClient } from '@angular/common/http';
   import { Injectable } from '@angular/core';
   
   @Injectable()
   export class DataService {
     constructor(private http: HttpClient) { }
   
     fetchData() {
       return this.http.get('/api/data');
     }
   }
   

额外提醒：升级到Angular 5后，旧的HttpModule（来自@angular/http）已经被HttpClientModule取代，建议彻底替换掉旧的Http服务，避免混用导致其他问题。

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