Upgrading to Angular 5: Using HttpClient, JSONP with parameters

December 27, 2017

Angular released version 5 - deprecating the old http module ”@angular/http” with the replacement of ”@angular/common/http”. Along with the http module, the jsonp module was also deprecated in favor of a better replacement which is included with the new HttpClient. The usage of jsonp is a little bit different with this version. My open source project, ngx-typeahead - is an auto suggest directive for Angular-  allowing to query a remote source either with jsonp or http (and with version 0.1.0 - static list as well). In this article, i’m sharing the steps I took for upgrading the package to use HttpClient and performing a jsonp request with parameters.

Step 1: Updating The Module Imports

First, lets import the relevant modules. Within src/modules/ngx-typeahead.module.ts, I replaced the code so it will import the new modules. Similar to before, there are 2 modules for using http and jsonp:

// Before: with Angular 4
import { HttpModule, JsonpModule } from '@angular/http';
...
@NgModule({
  imports: [CommonModule, HttpModule, JsonpModule],
})

// After: with Angular 5
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
...
@NgModule({
  imports: [CommonModule, HttpClientModule, HttpClientJsonpModule],
})

I also update the src/modules/ngx-typeahead.component.ts to import HttpClient only. Notice that the alternatives to “RequestOptionsArgs” and “URLSearchParams” have been updated too and are used inside a utility function (respectively, “HttpParams” and “HttpParamsOptions”:

// Before: with Angular 4
import {
  RequestOptionsArgs,
  Response,
  Jsonp,
  URLSearchParams,
  Http,
} from "@angular/http"

// After: with Angular 5
import { HttpClient } from "@angular/common/http"

Step 2: Updating The Http Service Injection

In contrary to the previous version, with Angular 5, “jsonp” is used as a method of the http service. All I had to do is change the injection of the http service to use “HttpClient” as well as remove the “Jsonp” injection:

// Before: with Angular 4
constructor(
      private element: ElementRef,
      private viewContainer: ViewContainerRef,
      private jsonp: Jsonp,
      private http: Http,
      private cdr: ChangeDetectorRef
    ) { }

// After: with Angular 5
constructor(
    private element: ElementRef,
    private viewContainer: ViewContainerRef,
    private http: HttpClient,
    private cdr: ChangeDetectorRef
  ) { }

Step 3: Updating the Jsonp call with parameters

In the old version, i used the jsonp service and had to create an options object which includes the parameters to attach for the request. Eventually, I passed 2 arguments to the jsonp method that was used (“get” by default):



With the new HttpClient it's a little bit different. "jsonp" is a method that performs the jsonp request. It takes the first argument as the url and the callback string name as the second argument.

```typescript


### Where jsonp request's parameters should be placed with Angular 5?

I had a small challenge with this one: the params in this case should be concatenated as string parameters to the url argument. Since i'm using the new "HttpParams" to construct a params object, I can use the "toString()" to get all parameters as url search parameters and add it to the url:

```typescript
requestJsonp(url, options, callback = 'callback') {
    // options.params is an HttpParams object
    const params = options.params.toString();
    return this.http.jsonp(`${url}?${params}`, callback)
      .map((response: Response) => response[1])
      .map((results: any[]) => results.map((result: string) => result[0]));
  }

You can see and experiment with ngx-typeahead in this plunkr demo and in production on my open source alternative player to YouTube: Echoes Player


My Consulting Packages

My consulting offerings include: Front End Development, Code reviews (React, Redux, Typescript, Javascript, Angular, NgRx), workshops, Consulting and Development. Feel free to reach out thru the below forms or through thecontact page.

javascript
react
angular
© 2022, Built with Gatsby, follow me at: