docs: migrate examples from @angular/http to @angular/common/http (#28296)

PR Close #28296

aio/content/examples/http/src/browser-test-shim.js

@@ -28,7 +28,6 @@
       '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
       '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
       '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-      '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
       '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
       '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
     },

aio/content/examples/styleguide/src/05-04/app/heroes/shared/hero.service.ts

@@ -1,19 +1,16 @@
 import { Injectable } from '@angular/core';
-import { Http }       from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
 
-import { Hero }       from './hero.model';
+import { Hero } from './hero.model';
 
 @Injectable()
 export class HeroService {
 
-  constructor(private http: Http) {}
+  constructor(private http: HttpClient) {}
 
   getHeroes(): Observable<Hero[]> {
-    return this.http.get('api/heroes').pipe(
+    return this.http.get<Hero[]>('api/heroes');
-      map(resp => resp.json().data as Hero[])
-    );
   }
 }

aio/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts

@@ -2,10 +2,10 @@
 /* avoid */
 
 import { OnInit } from '@angular/core';
-import { Http, Response } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 
 import { Observable } from 'rxjs';
-import { catchError, finalize, map } from 'rxjs/operators';
+import { catchError, finalize } from 'rxjs/operators';
 
 import { Hero } from '../shared/hero.model';
 
@@ -13,11 +13,10 @@ const heroesUrl = 'http://angular.io';
 
 export class HeroListComponent implements OnInit {
   heroes: Hero[];
-  constructor(private http: Http) {}
+  constructor(private http: HttpClient) {}
   getHeroes() {
     this.heroes = [];
     this.http.get(heroesUrl).pipe(
-      map((response: Response) => <Hero[]>response.json().data),
       catchError(this.catchBadResponse),
       finalize(() => this.hideSpinner())
     ).subscribe((heroes: Hero[]) => this.heroes = heroes);

aio/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts

@@ -1,18 +1,16 @@
 // #docregion
 import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
-import { map } from 'rxjs/operators';
 
 import { Hero } from './hero.model';
 
 @Injectable()
 // #docregion example
 export class HeroService {
-  constructor(private http: Http) { }
+  constructor(private http: HttpClient) { }
 
   getHeroes() {
-    return this.http.get('api/heroes').pipe(
+    return this.http.get<Hero[]>('api/heroes');
-      map((response: Response) => <Hero[]>response.json()));
   }
 }
 // #enddocregion example

aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { Inject } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 
 import { HeroService } from './hero.service';
 // #docregion example
@@ -9,6 +9,6 @@ import { HeroService } from './hero.service';
 export class HeroArena {
   constructor(
       @Inject(HeroService) private heroService: HeroService,
-      @Inject(Http) private http: Http) {}
+      @Inject(HttpClient) private http: HttpClient) {}
 }
 // #enddocregion example

aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 
 import { HeroService } from './hero.service';
 
@@ -10,7 +10,7 @@ import { HeroService } from './hero.service';
 export class HeroArena {
   constructor(
     private heroService: HeroService,
-    private http: Http) {}
+    private http: HttpClient) {}
     // #enddocregion example
     // test harness
     getParticipants() {

aio/content/examples/styleguide/src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
-import { BrowserModule }            from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
 
-import { HttpModule }           from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 
 import { RouterModule } from '@angular/router';
@@ -44,7 +44,7 @@ import * as s0901 from '../09-01/app/app.module';
 @NgModule({
   imports: [
     BrowserModule,
-    HttpModule,
+    HttpClientModule,
     InMemoryWebApiModule.forRoot(HeroData),
 
     s0101.AppModule,

aio/content/examples/testing/src/app/model/http-hero.service.spec.ts

@@ -1,126 +0,0 @@
-/**
- * Test the HeroService when implemented with the OLD HttpModule
- */
-import {
-   async, inject, TestBed
-} from '@angular/core/testing';
-
-import {
-  MockBackend,
-  MockConnection
-} from '@angular/http/testing';
-
-import {
-  HttpModule, Http, XHRBackend, Response, ResponseOptions
-} from '@angular/http';
-
-import { of } from 'rxjs';
-
-import { Hero } from './hero';
-import { HttpHeroService } from './http-hero.service';
-
-const makeHeroData = () => [
-  { id: 1, name: 'Windstorm' },
-  { id: 2, name: 'Bombasto' },
-  { id: 3, name: 'Magneta' },
-  { id: 4, name: 'Tornado' }
-] as Hero[];
-
-////////  Tests  /////////////
-describe('HttpHeroService (using old HttpModule)', () => {
-  let backend: MockBackend;
-  let service: HttpHeroService;
-
-  beforeEach( () => {
-    TestBed.configureTestingModule({
-      imports: [ HttpModule ],
-      providers: [
-        HttpHeroService,
-        { provide: XHRBackend, useClass: MockBackend }
-      ]
-    });
-  });
-
-  it('can instantiate service via DI', () => {
-      service = TestBed.get(HttpHeroService);
-      expect(service instanceof HttpHeroService).toBe(true);
-  });
-
-  it('can instantiate service with "new"', () => {
-    const http = TestBed.get(Http);
-    expect(http).not.toBeNull('http should be provided');
-    let service = new HttpHeroService(http);
-    expect(service instanceof HttpHeroService).toBe(true, 'new service should be ok');
-  });
-
-  it('can provide the mockBackend as XHRBackend', () => {
-    const backend = TestBed.get(XHRBackend);
-    expect(backend).not.toBeNull('backend should be provided');
-  });
-
-  describe('when getHeroes', () => {
-    let fakeHeroes: Hero[];
-    let http: Http;
-    let response: Response;
-
-    beforeEach(() => {
-
-      backend = TestBed.get(XHRBackend);
-      http = TestBed.get(Http);
-
-      service = new HttpHeroService(http);
-      fakeHeroes = makeHeroData();
-      let options = new ResponseOptions({status: 200, body: {data: fakeHeroes}});
-      response = new Response(options);
-    });
-
-    it('should have expected fake heroes (then)', () => {
-      backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
-
-      service.getHeroes().toPromise()
-      // .then(() => Promise.reject('deliberate'))
-        .then(heroes => {
-          expect(heroes.length).toBe(fakeHeroes.length,
-            'should have expected no. of heroes');
-        })
-        .catch(fail);
-    });
-
-    it('should have expected fake heroes (Observable tap)', () => {
-      backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
-
-      service.getHeroes().subscribe(
-        heroes => {
-          expect(heroes.length).toBe(fakeHeroes.length,
-            'should have expected no. of heroes');
-        },
-        fail
-      );
-    });
-
-
-    it('should be OK returning no heroes', () => {
-      let resp = new Response(new ResponseOptions({status: 200, body: {data: []}}));
-      backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
-
-      service.getHeroes().subscribe(
-        heroes => {
-          expect(heroes.length).toBe(0, 'should have no heroes');
-        },
-        fail
-      );
-    });
-
-    it('should treat 404 as an Observable error', () => {
-      let resp = new Response(new ResponseOptions({status: 404}));
-      backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
-
-      service.getHeroes().subscribe(
-        heroes => fail('should not respond with heroes'),
-        err => {
-          expect(err).toMatch(/Bad response status/, 'should catch bad response status code');
-          return of(null); // failure is the expected test result
-        });
-    });
-  });
-});

aio/content/examples/testing/src/app/model/http-hero.service.ts

@@ -1,69 +0,0 @@
-// The OLD Http module. See HeroService for use of the current HttpClient
-// #docplaster
-// #docregion
-import { Injectable }     from '@angular/core';
-import { Http, Response } from '@angular/http';
-import { Headers, RequestOptions } from '@angular/http';
-import { Hero }           from './hero';
-
-import { Observable } from 'rxjs';
-import { throwError } from 'rxjs';
-import { catchError, map } from 'rxjs/operators';
-
-@Injectable()
-export class HttpHeroService {
-  private _heroesUrl = 'app/heroes';  // URL to web api
-
-  constructor (private http: Http) {}
-
-  getHeroes (): Observable<Hero[]> {
-    return this.http.get(this._heroesUrl).pipe(
-      map(this.extractData),
-      // tap(data => console.log(data)), // eyeball results in the console
-      catchError(this.handleError)
-    );
-  }
-
-  getHero(id: number | string) {
-    return this.http.get('app/heroes/?id=${id}').pipe(
-      map((r: Response) => r.json().data as Hero[])
-    );
-  }
-
-  addHero (name: string): Observable<Hero>  {
-    let body = JSON.stringify({ name });
-    let headers = new Headers({ 'Content-Type': 'application/json' });
-    let options = new RequestOptions({ headers: headers });
-
-    return this.http.post(this._heroesUrl, body, options).pipe(
-      map(this.extractData),
-      catchError(this.handleError)
-    );
-  }
-
-  updateHero (hero: Hero): Observable<Hero>  {
-    let body = JSON.stringify(hero);
-    let headers = new Headers({ 'Content-Type': 'application/json' });
-    let options = new RequestOptions({ headers: headers });
-
-    return this.http.put(this._heroesUrl, body, options).pipe(
-      map(this.extractData),
-      catchError(this.handleError)
-    );
-  }
-
-  private extractData(res: Response) {
-    if (res.status < 200 || res.status >= 300) {
-      throw new Error('Bad response status: ' + res.status);
-    }
-    let body = res.json();
-    return body.data || { };
-  }
-
-  private handleError (error: any) {
-    // In a real world app, we might send the error to remote logging infrastructure
-    let errMsg = error.message || 'Server error';
-    console.error(errMsg); // log to console instead
-    return throwError(errMsg);
-  }
-}

aio/content/examples/testing/src/tests.html

@@ -41,7 +41,6 @@
       'app/hero/hero-detail.component.spec',
       'app/hero/hero-list.component.spec',
       'app/model/hero.service.spec',
-      'app/model/http-hero.service.spec',
       'app/shared/highlight.directive.spec',
       'app/shared/title-case.pipe.spec',
       'app/twain/twain.component.spec',

aio/content/examples/testing/src/tests.sb.ts

@@ -17,7 +17,6 @@ import './app/hero/hero-detail.component.no-testbed.spec.ts';
 import './app/hero/hero-detail.component.spec.ts';
 import './app/hero/hero-list.component.spec.ts';
 import './app/model/hero.service.spec.ts';
-import './app/model/http-hero.service.spec.ts';
 import './app/model/testing/http-client.spec.ts';
 import './app/shared/highlight.directive.spec.ts';
 import './app/shared/title-case.pipe.spec.ts';

aio/content/examples/upgrade-module/src/systemjs.config.1.js

@@ -15,10 +15,10 @@
       // angular bundles
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+      '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
       // #docregion upgrade-static-umd

aio/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts

@@ -6,9 +6,9 @@ import { BrowserModule } from '@angular/platform-browser';
 // #docregion upgrademodule
 import { UpgradeModule } from '@angular/upgrade/static';
 // #enddocregion upgrademodule
-// #docregion httpmodule
+// #docregion httpclientmodule
-import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
-// #enddocregion httpmodule
+// #enddocregion httpclientmodule
 // #docregion phonelist
 import { FormsModule } from '@angular/forms';
 // #enddocregion phonelist
@@ -28,7 +28,7 @@ import { routeParamsProvider } from './ajs-upgraded-providers';
 import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
 // #enddocregion phonedetail
 
-// #docregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
+// #docregion bare, upgrademodule, httpclientmodule, phone, phonelist, phonedetail, checkmarkpipe
 
 @NgModule({
   imports: [
@@ -36,12 +36,12 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
     // #enddocregion bare
     UpgradeModule,
     // #enddocregion upgrademodule
-    HttpModule,
+    HttpClientModule,
-    // #enddocregion httpmodule, phone
+    // #enddocregion httpclientmodule, phone
     FormsModule,
-  // #docregion bare, upgrademodule, httpmodule, phone
+  // #docregion bare, upgrademodule, httpclientmodule, phone
   ],
-  // #enddocregion bare, upgrademodule, httpmodule, phone
+  // #enddocregion bare, upgrademodule, httpclientmodule, phone
   declarations: [
     PhoneListComponent,
     // #enddocregion phonelist
@@ -63,7 +63,7 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
     // #docregion phone
   ]
   // #enddocregion routeparams
-// #docregion bare, upgrademodule, httpmodule, phonelist
+// #docregion bare, upgrademodule, httpclientmodule, phonelist
 })
 export class AppModule {
   // #enddocregion bare
@@ -73,4 +73,4 @@ export class AppModule {
   }
   // #docregion bare
 }
-// #enddocregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
+// #enddocregion bare, upgrademodule, httpclientmodule, phone, phonelist, phonedetail, checkmarkpipe

aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.spec.ts

@@ -1,12 +1,6 @@
 // #docregion
 import { inject, TestBed } from '@angular/core/testing';
-import {
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-  Http,
-  BaseRequestOptions,
-  ResponseOptions,
-  Response
-} from '@angular/http';
-import { MockBackend, MockConnection } from '@angular/http/testing';
 import { Phone, PhoneData } from './phone.service';
 
 describe('Phone', function() {
@@ -16,35 +10,34 @@ describe('Phone', function() {
     {name: 'Phone Y', snippet: '', images: []},
     {name: 'Phone Z', snippet: '', images: []}
   ];
-  let mockBackend: MockBackend;
+  let httpMock: HttpTestingController;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
+      imports: [
+        HttpClientTestingModule
+      ],
       providers: [
         Phone,
-        MockBackend,
-        BaseRequestOptions,
-        { provide: Http,
-          useFactory: (backend: MockBackend, options: BaseRequestOptions) => new Http(backend, options),
-          deps: [MockBackend, BaseRequestOptions]
-        }
       ]
     });
   });
 
-  beforeEach(inject([MockBackend, Phone], (_mockBackend_: MockBackend, _phone_: Phone) => {
+  beforeEach(inject([HttpTestingController, Phone], (_httpMock_: HttpTestingController, _phone_: Phone) => {
-    mockBackend = _mockBackend_;
+    httpMock = _httpMock_;
     phone = _phone_;
   }));
 
-  it('should fetch the phones data from `/phones/phones.json`', (done: () => void) => {
+  afterEach(() => {
-    mockBackend.connections.subscribe((conn: MockConnection) => {
+    httpMock.verify();
-      conn.mockRespond(new Response(new ResponseOptions({body: JSON.stringify(phonesData)})));
+  });
-    });
+
+  it('should fetch the phones data from `/phones/phones.json`', () => {
     phone.query().subscribe(result => {
       expect(result).toEqual(phonesData);
-      done();
     });
+    const req = httpMock.expectOne(`/phones/phones.json`);
+    req.flush(phonesData);
   });
 
 });

aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts

@@ -1,8 +1,7 @@
 // #docregion
 import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
 
 // #docregion downgrade-injectable
 declare var angular: angular.IAngularStatic;
@@ -22,16 +21,12 @@ export interface PhoneData {
 @Injectable()
 export class Phone {
 // #enddocregion classdef, downgrade-injectable
-  constructor(private http: Http) { }
+  constructor(private http: HttpClient) { }
   query(): Observable<PhoneData[]> {
-    return this.http.get(`phones/phones.json`).pipe(
+    return this.http.get<PhoneData[]>(`phones/phones.json`);
-      map((res: Response) => res.json())
-    );
   }
   get(id: string): Observable<PhoneData> {
-    return this.http.get(`phones/${id}.json`).pipe(
+    return this.http.get<PhoneData>(`phones/${id}.json`);
-      map((res: Response) => res.json())
-    );
   }
 // #docregion classdef, downgrade-injectable
 }

aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js

@@ -41,7 +41,6 @@ System.config({
     '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
     '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
     '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
     '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
     '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
   },

aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.js

@@ -48,7 +48,6 @@ System.config({
     '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
     '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
     '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
     '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
     '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
   },

aio/content/examples/upgrade-phonecat-2-hybrid/systemjs.config.1.js

@@ -16,10 +16,10 @@
       // angular bundles
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+      '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
       '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

aio/content/examples/upgrade-phonecat-3-final/app/app.module.ts

@@ -2,7 +2,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent }     from './app.component';
@@ -15,7 +15,7 @@ import { PhoneListComponent }   from './phone-list/phone-list.component';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
     AppRoutingModule
   ],
   declarations: [

aio/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.spec.ts

@@ -1,11 +1,5 @@
 import { inject, TestBed } from '@angular/core/testing';
-import {
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-  Http,
-  BaseRequestOptions,
-  ResponseOptions,
-  Response
-} from '@angular/http';
-import { MockBackend, MockConnection } from '@angular/http/testing';
 import { Phone, PhoneData } from './phone.service';
 
 describe('Phone', function() {
@@ -15,35 +9,26 @@ describe('Phone', function() {
     {name: 'Phone Y', snippet: '', images: []},
     {name: 'Phone Z', snippet: '', images: []}
   ];
-  let mockBackend: MockBackend;
+  let mockHttp: HttpTestingController;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [
+      imports: [HttpClientTestingModule],
-        Phone,
+      providers: [Phone]
-        MockBackend,
-        BaseRequestOptions,
-        { provide: Http,
-          useFactory: (backend: MockBackend, options: BaseRequestOptions) => new Http(backend, options),
-          deps: [MockBackend, BaseRequestOptions]
-        }
-      ]
     });
   });
 
-  beforeEach(inject([MockBackend, Phone], (_mockBackend_: MockBackend, _phone_: Phone) => {
+  beforeEach(inject([HttpTestingController, Phone], (_mockHttp_: HttpTestingController, _phone_: Phone) => {
-    mockBackend = _mockBackend_;
+    mockHttp = _mockHttp_;
     phone = _phone_;
   }));
 
-  it('should fetch the phones data from `/phones/phones.json`', (done: () => void) => {
+  it('should fetch the phones data from `/phones/phones.json`', () => {
-    mockBackend.connections.subscribe((conn: MockConnection) => {
-      conn.mockRespond(new Response(new ResponseOptions({body: JSON.stringify(phonesData)})));
-    });
     phone.query().subscribe(result => {
       expect(result).toEqual(phonesData);
-      done();
     });
+    const req = mockHttp.expectOne(`/phones/phones.json`);
+    req.flush(phonesData);
   });
 
 });

aio/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.ts

@@ -1,8 +1,7 @@
 // #docregion
 import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
 
 export interface PhoneData {
   name: string;
@@ -12,15 +11,11 @@ export interface PhoneData {
 
 @Injectable()
 export class Phone {
-  constructor(private http: Http) { }
+  constructor(private http: HttpClient) { }
   query(): Observable<PhoneData[]> {
-    return this.http.get(`phones/phones.json`).pipe(
+    return this.http.get<PhoneData[]>(`phones/phones.json`);
-      map((res: Response) => res.json())
-    );
   }
   get(id: string): Observable<PhoneData> {
-    return this.http.get(`phones/${id}.json`).pipe(
+    return this.http.get<PhoneData>(`phones/${id}.json`);
-      map((res: Response) => res.json())
-    );
   }
 }

aio/content/examples/upgrade-phonecat-3-final/karma-test-shim.js

@@ -44,10 +44,10 @@ System.config({
   map: {
     '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
     '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
+    '@angular/common/http/testing': 'npm:@angular/common/bundles/common-http-testing.umd.js',
     '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
     '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
     '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
     '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
     '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
   },

aio/content/examples/upgrade-phonecat-3-final/karma.conf.js

@@ -38,6 +38,10 @@ module.exports = function(config) {
       { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
       { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
 
+      // tslib (TS helper fns such as `__extends`)
+      { pattern: 'node_modules/tslib/**/*.js', included: false, watched: false },
+      { pattern: 'node_modules/tslib/**/*.js.map', included: false, watched: false },
+
       // Paths loaded via module imports:
       // Angular itself
       { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false },

aio/content/examples/upgrade-phonecat-3-final/systemjs.config.1.js

@@ -16,10 +16,10 @@
       // angular bundles
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+      '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
       '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

aio/content/guide/npm-packages.md

@@ -67,7 +67,6 @@ Package name                               | Description
 **@angular/compiler** | Angular's template compiler. It understands templates and can convert them to code that makes the application run and render. Typically you don’t interact with the compiler directly; rather, you use it indirectly via `platform-browser-dynamic` when JIT compiling in the browser. For more information, see the [Ahead-of-time Compilation guide](guide/aot-compiler).
 [**@angular/core**](api/core) | Critical runtime parts of the framework that are needed by every application. Includes all metadata decorators, `Component`, `Directive`,  dependency injection, and the component lifecycle hooks.
 [**@angular/forms**](api/forms) | Support for both [template-driven](guide/forms) and [reactive forms](guide/reactive-forms). For information about choosing the best forms approach for your app, see [Introduction to forms](guide/forms-overview).
-[**@angular/http**](api/http) | Angular's legacy HTTP client, which was deprecated in version 5.0 in favor of [@angular/common/http](api/common/http).
 [**@angular/<br />platform&#8209;browser**](api/platform-browser) | Everything DOM and browser related, especially the pieces that help render into the DOM. This package also includes the `bootstrapModuleFactory()` method for bootstrapping applications for production builds that pre-compile with [AOT](guide/aot-compiler).
 [**@angular/<br />platform&#8209;browser&#8209;dynamic**](api/platform-browser-dynamic) | Includes [providers](api/core/Provider) and methods to compile and run the app on the client using the [JIT compiler](guide/aot-compiler).
 [**@angular/router**](api/router) | The router module navigates among your app pages when the browser URL changes. For more information, see [Routing and Navigation](guide/router).

aio/content/guide/testing.md

@@ -470,13 +470,6 @@ While the _code sample_ accompanying this guide demonstrates `HttpClientTestingM
 this page defers to the [Http guide](guide/http#testing-http-requests),
 which covers testing with the `HttpClientTestingModule` in detail.
 
-<div class="alert is-helpful">
-
-This guide's sample code also demonstrates testing of the _legacy_ `HttpModule`
-in `app/model/http-hero.service.spec.ts`.
-
-</div>
-
 
 ## Component Test Basics
 

aio/content/guide/upgrade.md

@@ -1324,11 +1324,11 @@ ngResource and you're using it for two things:
 You can replace this implementation with an Angular service class, while
 keeping the controllers in AngularJS land.
 
-In the new version, you import the Angular HTTP module and call its `Http` service instead of `ngResource`.
+In the new version, you import the Angular HTTP module and call its `HttpClient` service instead of `ngResource`.
 
-Re-open the `app.module.ts` file, import and add `HttpModule` to the `imports` array of the `AppModule`:
+Re-open the `app.module.ts` file, import and add `HttpClientModule` to the `imports` array of the `AppModule`:
 
-<code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="httpmodule" header="app.module.ts">
+<code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="httpclientmodule" header="app.module.ts">
 </code-example>
 
 Now you're ready to upgrade the Phone service itself. Replace the ngResource-based
@@ -1343,7 +1343,7 @@ by the [Dependency Injection Guide](guide/dependency-injection),
 this is a marker decorator you need to use for classes that have no other
 Angular decorators but still need to have their dependencies injected.
 
-In its constructor the class expects to get the `Http` service. It will
+In its constructor the class expects to get the `HttpClient` service. It will
 be injected to it and it is stored as a private field. The service is then
 used in the two instance methods, one of which loads the list of all phones,
 and the other loads the details of a specified phone:

aio/tools/example-zipper/customizer/package-json/base.json

@@ -8,7 +8,6 @@
     "@angular/compiler",
     "@angular/core",
     "@angular/forms",
-    "@angular/http",
     "@angular/platform-browser",
     "@angular/platform-browser-dynamic",
     "@angular/router",

aio/tools/examples/shared/boilerplate/cli/package.json

@@ -17,11 +17,10 @@
     "@angular/compiler": "^7.0.0",
     "@angular/core": "^7.0.0",
     "@angular/forms": "^7.0.0",
-    "@angular/http": "^7.0.0",
     "@angular/platform-browser": "^7.0.0",
     "@angular/platform-browser-dynamic": "^7.0.0",
     "@angular/router": "^7.0.0",
-    "angular-in-memory-web-api": "^0.6.0",
+    "angular-in-memory-web-api": "^0.8.0",
     "core-js": "^2.5.4",
     "rxjs": "^6.3.0",
     "web-animations-js": "^2.3.1",

aio/tools/examples/shared/boilerplate/i18n/package.json

@@ -20,11 +20,10 @@
     "@angular/compiler": "^7.0.0",
     "@angular/core": "^7.0.0",
     "@angular/forms": "^7.0.0",
-    "@angular/http": "^7.0.0",
     "@angular/platform-browser": "^7.0.0",
     "@angular/platform-browser-dynamic": "^7.0.0",
     "@angular/router": "^7.0.0",
-    "angular-in-memory-web-api": "^0.6.0",
+    "angular-in-memory-web-api": "^0.8.0",
     "core-js": "^2.5.4",
     "rxjs": "^6.3.0",
     "web-animations-js": "^2.3.1",

aio/tools/examples/shared/boilerplate/service-worker/package.json

@@ -17,12 +17,11 @@
     "@angular/compiler": "^7.0.0",
     "@angular/core": "^7.0.0",
     "@angular/forms": "^7.0.0",
-    "@angular/http": "^7.0.0",
     "@angular/platform-browser": "^7.0.0",
     "@angular/platform-browser-dynamic": "^7.0.0",
     "@angular/router": "^7.0.0",
     "@angular/service-worker": "^7.0.0",
-    "angular-in-memory-web-api": "^0.6.0",
+    "angular-in-memory-web-api": "^0.8.0",
     "core-js": "^2.5.4",
     "rxjs": "^6.3.0",
     "web-animations-js": "^2.3.1",

aio/tools/examples/shared/boilerplate/systemjs/src/systemjs.config.js

@@ -23,7 +23,6 @@
       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
       '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
       '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

aio/tools/examples/shared/boilerplate/systemjs/src/systemjs.config.web.build.js

@@ -54,7 +54,6 @@ can be found in the LICENSE file at http://angular.io/license
       '@angular/platform-browser': 'ng:platform-browser-builds/master/bundles/platform-browser.umd.js',
       '@angular/platform-browser/animations': 'ng:animations-builds/master/bundles/platform-browser-animations.umd.js',
       '@angular/platform-browser-dynamic': 'ng:platform-browser-dynamic-builds/master/bundles/platform-browser-dynamic.umd.js',
-      '@angular/http': 'ng:http-builds/master/bundles/http.umd.js',
       '@angular/router': 'ng:router-builds/master/bundles/router.umd.js',
       '@angular/router/upgrade': 'ng:router-builds/master/bundles/router-upgrade.umd.js',
       '@angular/forms': 'ng:forms-builds/master/bundles/forms.umd.js',
@@ -68,7 +67,6 @@ can be found in the LICENSE file at http://angular.io/license
       '@angular/compiler/testing': 'ng:compiler-builds/master/bundles/compiler-testing.umd.js',
       '@angular/platform-browser/testing': 'ng:platform-browser-builds/master/bundles/platform-browser-testing.umd.js',
       '@angular/platform-browser-dynamic/testing': 'ng:platform-browser-dynamic-builds/master/bundles/platform-browser-dynamic-testing.umd.js',
-      '@angular/http/testing': 'ng:http-builds/master/bundles/http-testing.umd.js',
       '@angular/router/testing': 'ng:router-builds/master/bundles/router-testing.umd.js',
       '@angular/forms/testing': 'ng:forms-builds/master/bundles/forms-testing.umd.js',
 

aio/tools/examples/shared/boilerplate/systemjs/src/systemjs.config.web.js

@@ -50,7 +50,6 @@ can be found in the LICENSE file at http://angular.io/license
       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
       '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
       '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

aio/tools/examples/shared/boilerplate/universal/package.json

@@ -28,7 +28,7 @@
     "@nguniversal/common": "^7.0.0",
     "@nguniversal/express-engine": "^7.0.0",
     "@nguniversal/module-map-ngfactory-loader": "^7.0.0",
-    "angular-in-memory-web-api": "^0.6.0",
+    "angular-in-memory-web-api": "^0.8.0",
     "core-js": "^2.5.4",
     "rxjs": "^6.3.0",
     "web-animations-js": "^2.3.1",

aio/tools/transforms/angular-api-package/processors/computeApiBreadCrumbs.spec.js

@@ -17,17 +17,10 @@ describe('angular-api-package: computeApiBreadCrumbs processor', () => {
     const API_DOC_TYPES_TO_RENDER = ['class', 'interface', 'package'];
     const processor = processorFactory(API_DOC_TYPES_TO_RENDER);
 
-    const httpPackage = { docType: 'package', name: '@angular/http', id: 'http', path: 'http', isPrimaryPackage: true };
-    const httpTestingPackage = { docType: 'package', name: '@angular/http/testing', id: 'http/testing', path: 'http/testing', packageInfo: { primary: httpPackage } };
-    const testRequestClass = { docType: 'class', name: 'TestRequest', path: 'http/testing/test-request', moduleDoc: httpTestingPackage };
-
     const docs = [
       { docType: 'class', name: 'ClassA', path: 'module-1/class-a', moduleDoc: { id: 'moduleOne', path: 'module-1' } },
       { docType: 'interface', name: 'InterfaceB', path: 'module-2/interface-b', moduleDoc: { id: 'moduleTwo', path: 'module-2' } },
       { docType: 'guide', name: 'Guide One', path: 'guide/guide-1' },
-      httpPackage,
-      httpTestingPackage,
-      testRequestClass
     ];
     processor.$process(docs);
 
@@ -42,20 +35,5 @@ describe('angular-api-package: computeApiBreadCrumbs processor', () => {
       { text: 'InterfaceB', path: 'module-2/interface-b' },
     ]);
     expect(docs[2].breadCrumbs).toBeUndefined();
-    expect(docs[3].breadCrumbs).toEqual([
-      { text: 'API', path: '/api' },
-      { text: '@angular/http', path: 'http' },
-    ]);
-    expect(docs[4].breadCrumbs).toEqual([
-      { text: 'API', path: '/api' },
-      { text: '@angular/http', path: 'http' },
-      { text: '@angular/http/testing', path: 'http/testing' },
-    ]);
-    expect(docs[5].breadCrumbs).toEqual([
-      { text: 'API', path: '/api' },
-      { text: '@angular/http', path: 'http' },
-      { text: '@angular/http/testing', path: 'http/testing' },
-      { text: 'TestRequest', path: 'http/testing/test-request' },
-    ]);
   });
 });

aio/tools/transforms/angular-api-package/processors/generateApiListDoc.spec.js

@@ -40,13 +40,11 @@ describe('generateApiListDoc processor', () => {
     const docs = [
       { docType: 'package', id: '@angular/common/index', exports: [], path: 'common' },
       { docType: 'package', id: '@angular/core/index', exports: [], path: 'core' },
-      { docType: 'package', id: '@angular/http/index', exports: [], path: 'http' },
     ];
     processor.$process(docs);
-    expect(docs[3].data).toEqual([
+    expect(docs[2].data).toEqual([
       { name: '@angular/common', title: '@angular/common', items: [], path: 'common' },
       { name: '@angular/core', title: '@angular/core', items: [], path: 'core' },
-      { name: '@angular/http', title: '@angular/http', items: [], path: 'http' },
     ]);
   });