如何将 Angular HttpModule 导入到根 NgModule

Question

我从 ionic v2、angular2 和 typeScript 开始。所以我正在尝试设置一个离子登录页面，该页面检索登录凭据并联系远程 api 进行身份验证。我显然需要有角度的 Http 客户端。

src/app/app.component.ts 看起来像：

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';


import { LoginPage } from '../pages/login/login';


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = LoginPage;

  constructor(platform: Platform) {
    platform.ready().then(() => {

      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}  

src/app/app.module.ts 看起来像：

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { LoginPage } from '../pages/login/login';
import { AuthService } from '../providers/auth-service';
import { HttpModule, JsonpModule } from '@angular/http';

@NgModule({
  declarations: [
    MyApp,
    LoginPage,
    HttpModule,
    JsonpModule,

  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    LoginPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},AuthService]
})
export class AppModule {}

当然，任何其他必要的文件（page/login/login.* 和 provider/auth-service.ts）都已定义，因此不会出现丢失文件或服务错误。

问题：

当我通过ionic serve 构建应用程序时，该过程完成且没有错误，但是在浏览器中启动应用程序时，我收到此错误：

模块“AppModule”声明的意外模块“HttpModule”
不过，我只是按照this tutorial from the official documentation 的指示进行操作。
几个小时以来，我一直在谷歌搜索，但没有找到解决方法。
谁能告诉我我做错了什么？

Answer 1

你应该导入 HttpModule 如下，

imports: [   
    HttpModule,
    JsonpModule
    ...
    ...
}

注意：与 JsonpModule 相同。并且不要忘记将它们从 declarations 数组中删除。

Answer 2

就 Ionic 2 而言，您根本不需要单独导入 HttpModule。 IonicModule 在链接中为您这样做：

exports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,

您可以直接使用组件。表单类似。

Answer 3

declarations 属性用于声明您在此模块中拥有的每个组件和管道，允许您在模块中使用它们。

要在当前模块中使用另一个模块，您必须使用imports 属性，如下所示：

@NgModule({
  declarations: [
    MyApp,
    LoginPage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    HttpModule,
    JsonpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    LoginPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},AuthService]
})