Ionic 2 Cannot find module "@angular/common/http/src/headers"

Question

I just started learning ionic and while implementing rest-service i am getting following error,

Error: Cannot find module "@angular/common/http/src/headers"
    at Object.199 (http://localhost:8100/build/main.js:87:7)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.198 (http://localhost:8100/build/main.js:43:95)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.278 (http://localhost:8100/build/main.js:231:75)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.222 (http://localhost:8100/build/main.js:166:73)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.200 (http://localhost:8100/build/main.js:146:70)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)

and my version details are,

Ionic Framwork: 3.9.2
Ionic App scripts :3.1.8
Angular Core:5.0.3
Node:6.9.4
Os Platform: windows 7

my package.json contains -

"dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/http": "^4.5.3",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },

"devDependencies": { "@ionic/app-scripts": "3.1.8", "typescript": "2.4.2" } app.module look like this,

import { BrowserModule } from '@angular/platform-browser';
import {HttpClientModule} from '@angular/common/http';
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 { Http,HttpModule } from '@angular/http';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { RestServiceProvider } from '../providers/rest-service/rest-service';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    RestServiceProvider
  ]
})
export class AppModule {}

and last one my service look like this,

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { HttpHeaders } from '@angular/common/http/src/headers';
/*
  Generated class for the RestServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class RestServiceProvider {
  username:string;
  password:string;
  constructor(public http: HttpClient) {
    console.log('Hello RestServiceProvider Provider');
  }
  load(){

    let requestHeader=new HttpHeaders();
    requestHeader.append("Content-Type","application/json");
    let postParams={
      UserName:this.username,
      Password:this.password
    }
    return new Promise(resolve=>{
      this.http.post("htttp/someservice", postParams,{headers:requestHeader})
      .subscribe(data => {
        alert(data);
      }, error => {
        console.log(error);// Error getting the data
      });
    });
  }
}

looking for help. :-)

Answer 1

Change import { HttpHeaders } from '@angular/common/http/src/headers'; to import { HttpHeaders } from '@angular/common/http';