Http get request in Angular 2

Question

I am trying to retrieve data from the Statbureau inflation api- https://www.statbureau.org/en/inflation-api using Angular 2. I am starting off just testing out my api and making sure it outputs a success message in the console. It appears that the api I'm using is JSONP, because of the JSON address that I'm using http://www.statbureau.org/calculate-inflation-price-jsonp?jsoncallback=? On the website they provide a JS fiddle that makes a succesful call to the api using jquery. When I try to make the same call in Angular 2 I get the following errors:

TypeScript error: C:/Users/Rennie/projects/inflator/app/pages/home/home.ts(22,13): Error TS
2322: Type 'Observable<any>' is not assignable to type 'HomePage'.
  Property 'jsonp' is missing in type 'Observable<any>'.
TypeScript error: C:/Users/Rennie/projects/inflator/app/pages/home/home.ts(22,13): Error TS
2409: Return type of constructor signature must be assignable to the instance type of the c

Here is my code

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {Jsonp, URLSearchParams } from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {


  constructor(private jsonp: Jsonp) {

    this.jsonp=jsonp;
        let cpiUrl = "https://www.statbureau.org/calculate-inflation-price-jsonp?jsoncallback"
         let params = new URLSearchParams();
      params.set('country', 'united-states');
      params.set('amount', '102');
        params.set('start', '1968/1/1');
        params.set('finish', '2016/1/1');
        // TODO: Add error handling
        return this.jsonp
               .get(cpiUrl, { search: params }).map(function(response){ return response.json(); })

    }


}

My code differs from the call in the jsfiddle because I hard coded the api parameters just to quickly see a result.

Answer 1

1) A constructor typically (always?) does not have a return statement. Removing the return statment should handle type 'Observable<any>' is not assignable to type 'HomePage'.

2) There does not seem to be a method get on the Jsonp class in Angular 2 check the docs.

3) An observable sequence/pipeline will not be executed until subscription (they are lazy), so even if that code did compile the request would not be executed.

4) I think you should take a look at this similiar question.

Good luck.