title: Converting from HttpModule to HttpClientModule
body: <p>Angular is converting from HttpModule to HttpClientModule and deprecating the former, as detailed at <a href="https://stackoverflow.com/questions/45129790/difference-between-http-and-httpclient-in-angular-4">Difference between HTTP and HTTPClient in angular 4?</a>.  </p>
  
  <p>However the Angular tutorial at <a href="https://angular.io/tutorial/toh-pt6" rel="nofollow noreferrer">https://angular.io/tutorial/toh-pt6</a> uses HttpModule, while the Fundamentals information at <a href="https://angular.io/guide/http" rel="nofollow noreferrer">https://angular.io/guide/http</a> uses HttpClientModule as detailed at <a href="https://github.com/angular/angular/issues/19280" rel="nofollow noreferrer">https://github.com/angular/angular/issues/19280</a>.  The comparison is made more difficult by the tutorial using an in-memory server while the Fundamentals use a real web server.</p>
  
  <p>I've tried to make the switch from HttpModule to HttpClientModule in the Angular tutorial code using a real web server and gotten some parts working but other parts are not working.  It seems to work to change one of the getHeroes methods in hero.services.ts from </p>
  
  <pre><code>  getHeroes(): Promise&lt;Hero[]&gt; {
      return this.http.get(this.heroesUrl)
        .toPromise()
        .then(response =&gt; response.json().data as Hero[])
        .catch(this.handleError);
    }
  </code></pre>
  
  <p>to</p>
  
  <pre><code>  getHeroes(): Promise&lt;Hero[]&gt; {
      return this.httpClient.get(this.heroesUrl)
        .toPromise()
        .then(data =&gt; data['heroes'] as Hero[])
        .catch(this.handleError);
    }
  </code></pre>
  
  <p>though there may be ways this can be improved and this version may have problems I haven't discovered yet.  </p>
  
  <p>But I don't see an equivalent for the search method in hero-search.service.ts</p>
  
  <pre><code>  search(term: string): Observable&lt;Hero[]&gt; {
      return this.http
        .get(`api/heroes/?name=${term}`)
        .map(response =&gt; response.json().data as Hero[]);
    }
  </code></pre>
  
  <p>One should be able to dispense with map, but you can't use the same approach as above because there is an Observable instead of a Promise, and you get errors such as:</p>
  
  <pre><code>Type 'Observable&lt;Object&gt;' is not assignable to type 'Observable&lt;Hero[]&gt;'.
  </code></pre>
  
  <p>Has anyone converted the Heroes demo in the Angular tutorial to use HttpClientModule or knows how to convert the search code above?  </p>