chore(Example): Replace Http with HttpClient (#520)

example-app/app/app.module.ts

@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
-import { HttpModule } from '@angular/http';
 
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
@@ -30,7 +30,7 @@ import { environment } from '../environments/environment';
     CommonModule,
     BrowserModule,
     BrowserAnimationsModule,
-    HttpModule,
+    HttpClientModule,
     RouterModule.forRoot(routes, { useHash: true }),
 
     /**

example-app/app/core/services/google-books.spec.ts

@@ -1,22 +1,22 @@
 import { TestBed } from '@angular/core/testing';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { cold } from 'jasmine-marbles';
 import { GoogleBooksService } from './google-books';
 
 describe('Service: GoogleBooks', () => {
   let service: GoogleBooksService;
-  let http: any;
+  let http: HttpClient;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [
-        { provide: Http, useValue: { get: jest.fn() } },
+        { provide: HttpClient, useValue: { get: jest.fn() } },
         GoogleBooksService,
       ],
     });
 
     service = TestBed.get(GoogleBooksService);
-    http = TestBed.get(Http);
+    http = TestBed.get(HttpClient);
   });
 
   const data = {
@@ -35,11 +35,7 @@ describe('Service: GoogleBooks', () => {
   const queryTitle = 'Book Title';
 
   it('should call the search api and return the search results', () => {
-    const httpResponse = {
-      json: () => books,
-    };
-
-    const response = cold('-a|', { a: httpResponse });
+    const response = cold('-a|', { a: books });
     const expected = cold('-b|', { b: books.items });
     http.get = jest.fn(() => response);
 
@@ -50,11 +46,7 @@ describe('Service: GoogleBooks', () => {
   });
 
   it('should retrieve the book from the volumeId', () => {
-    const httpResponse = {
-      json: () => data,
-    };
-
-    const response = cold('-a|', { a: httpResponse });
+    const response = cold('-a|', { a: data });
     const expected = cold('-b|', { b: data });
     http.get = jest.fn(() => response);
 

example-app/app/core/services/google-books.ts

@@ -1,22 +1,22 @@
 import 'rxjs/add/operator/map';
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
 import { Book } from '../../books/models/book';
 
 @Injectable()
 export class GoogleBooksService {
   private API_PATH = 'https://www.googleapis.com/books/v1/volumes';
 
-  constructor(private http: Http) {}
+  constructor(private http: HttpClient) {}
 
   searchBooks(queryTitle: string): Observable<Book[]> {
     return this.http
-      .get(`${this.API_PATH}?q=${queryTitle}`)
-      .map(res => res.json().items || []);
+      .get<{ items: Book[] }>(`${this.API_PATH}?q=${queryTitle}`)
+      .map(books => books.items || []);
   }
 
   retrieveBook(volumeId: string): Observable<Book> {
-    return this.http.get(`${this.API_PATH}/${volumeId}`).map(res => res.json());
+    return this.http.get<Book>(`${this.API_PATH}/${volumeId}`);
   }
 }