title: How to converting Http to HttpClient in Angular 5 (or >4.3)?
body: <p>I have a working code using Http and I would like to learn how to convert this to use the latest HttpClient.</p>
  
  <p>I have done the following steps:</p>
  
  <ul>
  <li>in App.module.ts: import { HttpClientModule } from
  "@angular/common/http";</li>
  <li>add HttpClientModule into the imports array</li>
  <li>in the below service file (see below): import { HttpClient }
  from "@angular/common/http";</li>
  <li>Inject HttpClient instead of Http in the
  constructor (replace Http with HttpClient.</li>
  </ul>
  
  <p>Now, the following steps I can't get correct (how to rewrite <code>return this.http.get(queryUrl)..</code>)</p>
  
  <p>Any ideas?</p>
  
  <p>...</p>
  
  <p>Code working using <strong>Http</strong>:</p>
  
  <pre><code>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&lt;SearchResult[]&gt; {
      const params: string = [
        `q=${query}`,
        `key=${this.apiKey}`,
        `part=snippet`,
        `type=video`,
        `maxResults=10`,
      ].join("&amp;");
      const queryUrl = `${this.apiUrl}?${params}`;
  
      return this.http.get(queryUrl).map((response: Response) =&gt; {
        return (&lt;any&gt;response.json()).items.map(item =&gt; {
          // 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,
          });
        });
      });
    }
  }
  </code></pre>
  
  <p>Here is the updated code </p>