Angular 2 Http client not doing anything when called

Question

TL;DR: Nothing happens when it hits this.http.get()

I've been following this tutorial here https://angular.io/docs/ts/latest/guide/server-communication.html and tried making a few of the methods myself, but I am unable to make any requests to my server, being ASP.NET Core RC2.

import { Headers, RequestOptions } from '@angular/http';
import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable }     from 'rxjs/Observable';
import { RegistrationViewModel } from '../../account/registration';

@Injectable()
export class WeatherService {

    constructor(private http: Http) { }

    getItems(): Observable<any> {

        return this.http.get('http://localhost:56340/api/SampleData/WeatherForecasts')
                   .map((res: Response) => res.json());
    }
}

The code I am calling this method from calls it fine, I've walked through this with debugger, but nothing appears to happen when it hits the http.get line, I don't see anything in the network tab of Chrome or any sort of response.

The URL http://localhost:56340/api/SampleData/WeatherForecasts works fine since I've put that into the browser by itself and it returns the sample data.
I've also tried with just '/api/SampleData/WeatherForecasts' with no results aswell

I am getting one TS error from Visual Studio:

Property 'map' does not exist on type Observable

But I don't get any errors from angular in the console from it, so I think it might just be a typings issue since it is imported in my main.ts by importing rxjs-operators which contains import 'rxjs/add/operator/map';

rxjs-operators.ts

// Statics
import 'rxjs/add/observable/throw';

// Operators
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

Check the tutorial, you need to subscribe to get the data, or use an async pipe, create mydata var on class, in ngOnInit do this.mydata=this.getItems(). Then display in html (mydata | async) | json — Siraj
– Siraj, Commented Jun 26, 2016 at 3:02
Ah ok yeah, it was due to the fact that I wasn't subscribing the service call from my Component, must have overlooked that part — Toxicable
– Toxicable, Commented Jun 26, 2016 at 8:05

null canvas · Accepted Answer · 2016-06-25 09:31:28Z

3

Add a catch to see any other errors you might have

  getHeroes (): Observable<Hero[]> {
        return this.http.get(this.heroesUrl)
                        .map(this.extractData)
                        .catch(this.handleError);
      }
      private extractData(res: Response) {
        let body = res.json();
        return body.data || { };
      }

Also try to import only the required modules:

// import 'rxjs/Rx'; // adds ALL RxJS statics & operators to Observable

// See node_module/rxjs/Rxjs.js
// Import just the rxjs statics and operators we need for THIS app.

// Statics
import 'rxjs/add/observable/throw';

// Operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';

edited Jun 25, 2016 at 9:31

answered Jun 25, 2016 at 9:27

null canvas

10.7k2 gold badges17 silver badges18 bronze badges

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

6 Comments

Toxicable Over a year ago

Nothing is being output into the console nor is the extractData or handleError methods ever running

Toxicable Over a year ago

I accidentally deleted the catch operator, put it back in and now it's back to not doing anything

Siraj Over a year ago

Have you subscribed it. Observables are lazy, they don't do anything untill you subscribe

Toxicable Over a year ago

@Siraj I'm not familiar with subscribing what you can see is all that i've done, I was just following the tutorial. I'll will do some research on it when I can get back to it this afternoon

kevingreen Over a year ago

@Siraj Thanks for pointing out the obvious. I was having this same problem developing a new service. I had forgotten to subscribe! It looked identical to my other services. I was going nuts looking for the bug.

|

Collectives™ on Stack Overflow

Angular 2 Http client not doing anything when called

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related