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