Error loading @angular/common/http - angular 2

Question

I am trying to implement a service in Angular 2.

Service:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { BrowserModule } from '@angular/platform-browser';


@Injectable()
export class DemoService {


constructor(private http: HttpClient
         ) { }
  GetData(): Observable<String> {
    const baseUrl = 'http://localhost:54037/api/home'; // this  part  will  come from  config  file  in futer
   // const url = '?resourceId=' + primaryId + '&showDate=' + selectedDate;
    // http://localhost:55174/api/Resource?resourceId=3&showDate=2017-06-06
    return this.http
      .get<String>(baseUrl);
  }

}

Component:

import { Component, OnInit } from '@angular/core';
import { DemoService } from './app.service';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,

})
export class AppComponent implements OnInit  { 

  constructor(private s: DemoService){} 
  name = 'Angular 2'; 
ngOnInit(){
console.log("Inidialization completed");

}

}

Everything works fine but as soon as I create an instance of service in constructor under component class, I get an error at the console.

Error loading http://localhost:3002/node_modules/@angular/common/bundles/common.umd.js/http as "@angular/common/http" from http://localhost:3002/app/app.service.js

If I remove constructor part, I get output.

I need to create an instance of Constructor and then call service.

Am I doing anything wrong?

Answer 1

Importing HttpModule in app.module like below

import { HttpModule} from '@angular/http'

and

Importing Http in service as below

import { Http, Response} from '@angular/http'

solved the problem.