Angular项目报错：Unexpected value 'HttpClient'导入AppModule求助

这个错误的原因很明确：你把HttpClient（一个服务类）直接放到了AppModule的imports数组里，但imports数组只接受带有@NgModule注解的模块类，这就是编译器提示你"Unexpected value 'HttpClient' imported by the module 'AppModule'"的核心原因。

修正步骤： #

1. 将导入的HttpClient替换为HttpClientModule
2. 在imports数组中用HttpClientModule替代原来的HttpClient

修正后的app.module.ts代码如下：

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
// 替换导入：从HttpClient改成HttpClientModule
import { HttpClientModule } from '@angular/common/http';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { DataProvider } from '../providers/data/data';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
  ],
  imports: [
    BrowserModule,
    // 这里用HttpClientModule代替HttpClient
    HttpClientModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    DataProvider
  ]
})
export class AppModule {}

补充说明： #

HttpClientModule是Angular官方提供的用于HTTP请求的模块，它内部已经自动注册了HttpClient服务。当你在DataProvider这类服务中需要使用HttpClient时，只需要通过依赖注入的方式引入即可，完全不需要在模块里单独导入HttpClient类。

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