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?

Have you checked https://stackoverflow.com/questions/45207615/cannot-find-the-angular-common-http-module/45207765 ? What does your modules look like? — eko, Jul 26 '17 at 11:25
I did check. It didnt solve my issue. I am still getting error — Dheeraj Kumar, Jul 26 '17 at 11:33
@Jota. Its little confusing whether I should import Http, Httpmodule and what do I use in service for calling api..!! :( — Dheeraj Kumar, Jul 26 '17 at 12:00
HttpModule and HttpClientModule are 2 different libraries/packages. If you want to use HttpClient in your app, you need to import the second. https://angular.io/guide/http — Jota.Toledo, Jul 26 '17 at 12:02

score -1 · Accepted Answer · answered Jul 26 '17 at 13:39

-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.

answered Jul 26 '17 at 13:39

Dheeraj Kumar

3,917
8
43
80

This makes no sense, as you are using HttpClient as dependency in your service, not http. Edit your question if you are now using Http as this could be misleading for others – Jota.Toledo Jul 26 '17 at 17:21
@Jota.Toledo When I was using HttpClient and HttpClientModule, I wasn't able to import those classes since @angular/common/http is not available in npm registery which I installed. thats why I had to change it to Http and HttpModule. I hope this clears it out. – Dheeraj Kumar Jul 27 '17 at 07:21

Error loading @angular/common/http - angular 2

1 Answers1

Linked