How to import angular HttpModule to the root NgModule

Question

I am beginning with ionic v2, angular2 and typeScript. So i am trying to set up an ionic login page which retrieves login credentials and contact the remote api for authentication. I obviously need angular Http Client.

The src/app/app.component.ts looks like:

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 looks like:

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 {}

Of course any other necessary files (page/login/login.* and provider/auth-service.ts) are defined, so there is no missing file or service error.

THE PROBLEM:

When i build the app via ionic serve, the process finishes without errors, but when launching the app in the browser, i get this error:

Unexpected module "HttpModule" declared by the module "AppModule"
Nevertheless i am just following instructions from this tutorial from the official documentation.
I have been googling since a couple of hours without finding a workaround.
Can someone tell me what am i doing wrong?

Solution 1

You should import HttpModule as follow,

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

NOTE: Same with JsonpModule. And don't forget to remove them from declarations array.

Solution 2

declarations property is used to declare every components and pipes you have in this module, allowing you to use them in the module.

To use another module in the current one, you have to use imports property, like this:

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

Solution 3

As far as Ionic 2 is concerned, you need not separately import HttpModule at all. IonicModule does that for you like so in the link:

exports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,

You can directly use the components.Similar for forms.