typescript - How to make a simple JSONP asynchronous request in Angular 2?

Question

I'm trying to convert the following Angular 1 code to Angular 2:

$http.jsonp('https://accounts.google.com/logout');

It needs to be a JSONP request to skip the CORS policy issue.

Answer 1

In the latest version of Angular

1. Import HttpClientModule and HttpClientJsonpModule modules in your app module's definition file

    import {
        HttpClientModule,
        HttpClientJsonpModule
    } from '@angular/common/http';
   
    @NgModule({
    declarations: [
        //... List of components that you need.
    ],
    imports: [
        HttpClientModule,
        HttpClientJsonpModule,
        //...
    ],
    providers: [
        //...
    ],
    bootstrap: [AppComponent]
    })
   

2. Inject http and map rxjs operator into your service:

    import {Injectable} from '@angular/core';
    import {HttpClient} from '@angular/http';
    import 'rxjs/add/operator/map';
   
    @Injectable()
    export class MegaSuperService {
       constructor(private _http: HttpClient) {}
    }
   

3. Make JSONP requests in the following way:

    // inside your service
    this._http.jsonp('/api/get', 'callback').map(data => {
    // Do stuff.
    });
   

In Angular version 2 - version 4.3

1. Import JSONP module in your app module's definition file:

    import {JsonpModule} from '@angular/http';
   
    @NgModule({
    declarations: [
        //... List of components that you need.
    ],
    imports: [
        JsonpModule,
        //...
    ],
    providers: [
        //...
    ],
    bootstrap: [AppComponent]
    })
   

2. Inject jsonp service and map rxjs operator into your service:

    import {Injectable} from '@angular/core';
    import {Jsonp} from '@angular/http';
    import 'rxjs/add/operator/map';
   
    @Injectable()
    export class MegaSuperService {
       constructor(private _jsonp: Jsonp) {}
    }
   

3. Make requests using "JSONP_CALLBACK" as a callback property:

    // inside your service
    this._jsonp.get('/api/get?callback=JSONP_CALLBACK').map(data => {
    // Do stuff.
    });