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?

Answer 1

You should import HttpModule as follow,

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

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