意外的值“HttpClient”答案

【问题标题】：Unexpected value ‘HttpClient’意外的值“HttpClient”
【发布时间】：2018-05-23 10:27:12
【问题描述】：

这是我的 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';
import { HttpClient } 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,
    HttpClient,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    DataProvider
  ]
})
export class AppModule {}

我收到这样的错误：

Uncaught Error: Unexpected value 'HttpClient' imported by the module
'AppModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.js:486)
    at compiler.js:15240
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15215)
    at JitCompiler._loadModules (compiler.js:34413)
    at JitCompiler._compileModuleAndComponents (compiler.js:34374)
    at JitCompiler.compileModuleAsync (compiler.js:34268)
    at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)
    at PlatformRef.bootstrapModule (core.js:5578)
    at Object.199 (main.ts:5) syntaxError @ compiler.js:486 (anonymous) @ compiler.js:15240
CompileMetadataResolver.getNgModuleMetadata @ compiler.js:15215
JitCompiler._loadModules @ compiler.js:34413
JitCompiler._compileModuleAndComponents @ compiler.js:34374
JitCompiler.compileModuleAsync @ compiler.js:34268
CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:239
PlatformRef.bootstrapModule @ core.js:5578 199 @ main.ts:5
__webpack_require__ @ bootstrap c2d88ebb0bb27539f897:54 webpackJsonpCallback @ bootstrap c2d88ebb0bb27539f897:25 (anonymous) @
main.js:1

【问题讨论】：

标签： angular ionic-framework ionic3 httpclient

【解决方案1】：

您必须 import 模块 HttpClientModule 并在导入中引用它。

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

  imports: [
    BrowserModule,
    HttpClientModule, // import the module
    IonicModule.forRoot(MyApp)
  ]

【讨论】：

【解决方案2】：

您正在使用HttpClient 模块而不是HttpClientModule。因此，将两个导入中的 HttpClient 替换为 HttpCLientModule

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

和

  imports: [
    BrowserModule,
    HttpClientModule, 
    IonicModule.forRoot(MyApp)
  ]

【讨论】：

【解决方案3】：

Angular 4.3 引入了一个新模块 HttpClientModule，它是对现有 HttpModule 的完全重写。

import { HttpModule } from '@angular/http';

to:

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

第二步是将服务Http的每个实例替换为新服务HttpClient。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { UserModel } from './user.model';

@Injectable()
export class UserService {

  constructor(private http: HttpClient) {}

  list(): Observable<UserModel> {
    return this.http.get('/api/users');
  }
}

【讨论】：