How to converting Http to HttpClient in Angular 5 (or >4.3)?

Question

I have a working code using Http and I would like to learn how to convert this to use the latest HttpClient.

I have done the following steps:

• in App.module.ts: import { HttpClientModule } from "@angular/common/http";
• add HttpClientModule into the imports array
• in the below service file (see below): import { HttpClient } from "@angular/common/http";
• Inject HttpClient instead of Http in the constructor (replace Http with HttpClient.

Now, the following steps I can't get correct (how to rewrite return this.http.get(queryUrl)..)

Any ideas?

...

Code working using Http:

import { Injectable, Inject } from "@angular/core";
import { Http, Response } from "@angular/http";
import { Observable } from "rxjs/Observable";
import { SearchResult } from "../models/search-results.model";

export const YOUTUBE_API_KEY = "AIzaSyCIYsOjnkrIjZhVCFwqNJxe1QswhsliciQ";
export const YOUTUBE_API_URL = "https://www.googleapis.com/youtube/v3/search";

@Injectable()
export class YoutubeSearchService {
  constructor(
    private http: Http,
    @Inject(YOUTUBE_API_KEY) private apiKey: string,
    @Inject(YOUTUBE_API_URL) private apiUrl: string,
  ) {}

  search(query: string): Observable<SearchResult[]> {
    const params: string = [
      `q=${query}`,
      `key=${this.apiKey}`,
      `part=snippet`,
      `type=video`,
      `maxResults=10`,
    ].join("&");
    const queryUrl = `${this.apiUrl}?${params}`;

    return this.http.get(queryUrl).map((response: Response) => {
      return (<any>response.json()).items.map(item => {
        // console.log("raw item", item); // uncomment if you want to debug
        return new SearchResult({
          id: item.id.videoId,
          title: item.snippet.title,
          description: item.snippet.description,
          thumbnailUrl: item.snippet.thumbnails.high.url,
        });
      });
    });
  }
}

Here is the updated code

Answer 1

Response types are now controlled by responseType option, which defaults to json. This eliminates .map((response: Response) => response.json()) line.

HttpClient methods are generic, and response object type defaults to Object. The type can be provided for stronger typing:

return this.httpClient.get(queryUrl).map(response => {
  return response.items.map(
    item =>
      new SearchResult({
        id: item.id.videoId,
        title: item.snippet.title,
        description: item.snippet.description,
        thumbnailUrl: item.snippet.thumbnails.high.url,
      }),
  );
});

It is beneficial to rename service instance to httpClient to avoid confusion with Http instances.

After when you want to use the service, you subscribe to it.

Lets say youtube is the injected YoutubeSearchService in the component.

  queryYoutube() {
    this.youtube.search("Rio de Janeiro").subscribe(data => console.log(data));
  }

Answer 2

In angular 5 you can use the .map function inside the .pipe twice to do the same thing as in the previous angular version:

getCoinRankings () : Observable<Coinobject[]>{
  return this.http.get<Coinobject[]>(this.coinmarketcapAPI)
    .pipe(
      map(x => x.map(data => new Coinobject(data))),
      tap(coinrankings => console.log(`fetched coinrankings`)),
      catchError(this.handleError('getCoinrankings',[]))
    )
}

x = the request.json() -> the whole json response data = the individual item in the json array. In my example I used a constructor that would manually map the json to the required properties, but you can also do it with like this.

return this.httpClient.get<Object[]>(queryUrl).pipe(
    map(response => response.map(data => new SearchResult{
        id: item.id.videoId,
        title: item.snippet.title,
        description: item.snippet.description,
        thumbnailUrl: item.snippet.thumbnails.high.url,
      })),
    tap(...),
    catchError(...)
    )
}

Not that the user of a decrepated module would hurt your application offcourse... (but feel free to correct me)