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

null canvas null canvas · Accepted Answer · 2016-06-25T09:27:34

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

Angular 2 Http client not doing anything when called

1 Answers