Ionic 2 Cannot find module "#angular/common/http/src/headers" - ionic-framework

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';