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 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.
   });