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 stackoverflow.com/questions/45207615/… ? What does your modules look like? — eko
– eko, Commented Jul 26, 2017 at 11:25
I did check. It didnt solve my issue. I am still getting error — Dheeraj Kumar
– Dheeraj Kumar, Commented Jul 26, 2017 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
– Dheeraj Kumar, Commented Jul 26, 2017 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. angular.io/guide/http — Jota.Toledo
– Jota.Toledo, Commented Jul 26, 2017 at 12:02

Dheeraj Kumar · Accepted Answer · 2017-07-26 13:39:55Z

-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, 2017 at 13:39

Dheeraj Kumar

4,2559 gold badges51 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jota.Toledo Over a year ago

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

Dheeraj Kumar Over a year ago

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

Collectives™ on Stack Overflow

Error loading @angular/common/http - angular 2

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related