refactor: switch to HttpClient (#6702)

Refactors all of the usages of the deprecated `Http` by replacing them with the `HttpClient`.

BREAKING CHANGE: Material now requires `@angular/common` instead of `@angular/http` and uses `HttpClient` instead of `Http`.

package.json

@@ -30,7 +30,6 @@
     "@angular/compiler": "~4.4.4",
     "@angular/core": "~4.4.4",
     "@angular/forms": "~4.4.4",
-    "@angular/http": "~4.4.4",
     "@angular/platform-browser": "~4.4.4",
     "core-js": "^2.4.1",
     "rxjs": "^5.0.1",
@@ -45,6 +44,7 @@
     "@angular/platform-server": "~4.4.4",
     "@angular/router": "~4.4.4",
     "@angular/tsc-wrapped": "~4.4.4",
+    "@angular/http": "~4.4.4",
     "@google-cloud/storage": "^1.1.1",
     "@types/chalk": "^0.4.31",
     "@types/fs-extra": "^3.0.1",

scripts/closure-compiler/build-devapp-bundle.sh

@@ -42,9 +42,9 @@ OPTS=(
   "--js_module_root=dist/releases/material-moment-adapter"
   "--js_module_root=node_modules/@angular/core"
   "--js_module_root=node_modules/@angular/common"
+  "--js_module_root=node_modules/@angular/common/http"
   "--js_module_root=node_modules/@angular/compiler"
   "--js_module_root=node_modules/@angular/forms"
-  "--js_module_root=node_modules/@angular/http"
   "--js_module_root=node_modules/@angular/router"
   "--js_module_root=node_modules/@angular/platform-browser"
   "--js_module_root=node_modules/@angular/platform-browser/animations"
@@ -65,9 +65,9 @@ OPTS=(
   # Include all Angular FESM bundles.
   node_modules/@angular/core/@angular/core.js
   node_modules/@angular/common/@angular/common.js
+  node_modules/@angular/common/@angular/common/http.js
   node_modules/@angular/compiler/@angular/compiler.js
   node_modules/@angular/forms/@angular/forms.js
-  node_modules/@angular/http/@angular/http.js
   node_modules/@angular/router/@angular/router.js
   node_modules/@angular/platform-browser/@angular/platform-browser.js
   node_modules/@angular/platform-browser/@angular/platform-browser/animations.js

src/demo-app/demo-app-module.ts

@@ -1,6 +1,6 @@
 import {ApplicationRef, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
-import {HttpModule} from '@angular/http';
+import {HttpClientModule} from '@angular/common/http';
 import {RouterModule} from '@angular/router';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ALL_ROUTES} from './demo-app/routes';
@@ -13,7 +13,7 @@ import {AccessibilityDemoModule} from './a11y/a11y-module';
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    HttpModule,
+    HttpClientModule,
     DemoModule,
     AccessibilityDemoModule,
     RouterModule.forRoot(ALL_ROUTES),

src/demo-app/system-config.ts

@@ -9,13 +9,14 @@ System.config({
   map: {
     'rxjs': 'node:rxjs',
     'main': 'main.js',
+    'tslib': 'node:tslib/tslib.js',
     'moment': 'node:moment/min/moment-with-locales.min.js',
 
     // Angular specific mappings.
     '@angular/core': 'node:@angular/core/bundles/core.umd.js',
     '@angular/common': 'node:@angular/common/bundles/common.umd.js',
+    '@angular/common/http': 'node:@angular/common/bundles/common-http.umd.js',
     '@angular/compiler': 'node:@angular/compiler/bundles/compiler.umd.js',
-    '@angular/http': 'node:@angular/http/bundles/http.umd.js',
     '@angular/forms': 'node:@angular/forms/bundles/forms.umd.js',
     '@angular/animations': 'node:@angular/animations/bundles/animations.umd.js',
     '@angular/router': 'node:@angular/router/bundles/router.umd.js',

src/e2e-app/system-config.ts

@@ -10,12 +10,13 @@ System.config({
     'rxjs': 'node:rxjs',
     'main': 'main.js',
     'moment': 'node:moment/min/moment-with-locales.min.js',
+    'tslib': 'node:tslib/tslib.js',
 
     // Angular specific mappings.
     '@angular/core': 'node:@angular/core/bundles/core.umd.js',
     '@angular/common': 'node:@angular/common/bundles/common.umd.js',
+    '@angular/common/http': 'node:@angular/common/bundles/common-http.umd.js',
     '@angular/compiler': 'node:@angular/compiler/bundles/compiler.umd.js',
-    '@angular/http': 'node:@angular/http/bundles/http.umd.js',
     '@angular/forms': 'node:@angular/forms/bundles/forms.umd.js',
     '@angular/router': 'node:@angular/router/bundles/router.umd.js',
     '@angular/animations': 'node:@angular/animations/bundles/animations.umd.js',

src/lib/icon/fake-svgs.ts

@@ -6,69 +6,41 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Response, ResponseOptions} from '@angular/http';
-
 /**
  * Fake URLs and associated SVG documents used by tests.
  * @docs-private
  */
-const FAKE_SVGS = (() => {
-  const svgs = new Map<string, string>();
-  svgs.set('cat.svg',
-      '<svg><path id="meow"></path></svg>');
-
-  svgs.set('dog.svg',
-      '<svg><path id="woof"></path></svg>');
-
-  svgs.set('farm-set-1.svg', `
-      <svg>
-        <defs>
-          <g id="pig"><path id="oink"></path></g>
-          <g id="cow"><path id="moo"></path></g>
-        </defs>
-      </svg>
-  `);
-
-  svgs.set('farm-set-2.svg', `
-      <svg>
-        <defs>
-          <g id="cow"><path id="moo moo"></path></g>
-          <g id="sheep"><path id="baa"></path></g>
-        </defs>
-      </svg>
-  `);
-
-  svgs.set('farm-set-3.svg', `
-      <svg>
-        <symbol id="duck">
-          <path id="quack"></path>
-        </symbol>
-      </svg>
-  `);
-
-  svgs.set('arrow-set.svg', `
-      <svg>
-        <defs>
-          <svg id="left-arrow"><path id="left"></path></svg>
-          <svg id="right-arrow"><path id="right"></path></svg>
-        </defs>
-      </svg>
-  `);
-
-  return svgs;
-})();
-
-/**
- * Returns an HTTP response for a fake SVG URL.
- * @docs-private
- */
-export function getFakeSvgHttpResponse(url: string) {
-  if (FAKE_SVGS.has(url)) {
-    return new Response(new ResponseOptions({
-      status: 200,
-      body: FAKE_SVGS.get(url),
-    }));
-  } else {
-    return new Response(new ResponseOptions({status: 404}));
-  }
-}
+export const FAKE_SVGS = {
+  cat: '<svg><path id="meow"></path></svg>',
+  dog: '<svg><path id="woof"></path></svg>',
+  farmSet1: `
+    <svg>
+      <defs>
+        <g id="pig"><path id="oink"></path></g>
+        <g id="cow"><path id="moo"></path></g>
+      </defs>
+    </svg>
+  `,
+  farmSet2: `
+    <svg>
+      <defs>
+        <g id="cow"><path id="moo moo"></path></g>
+        <g id="sheep"><path id="baa"></path></g>
+      </defs>
+    </svg>
+  `,
+  farmSet3: `
+    <svg>
+      <symbol id="duck">
+        <path id="quack"></path>
+      </symbol>
+    </svg>
+  `,
+  arrows: `
+    <svg>
+      <defs>
+        <svg id="left-arrow"><path id="left"></path></svg>
+        <svg id="right-arrow"><path id="right"></path></svg>
+      </defs>
+    </svg>  `
+};

src/lib/icon/icon-registry.ts

@@ -8,7 +8,7 @@
 
 import {catchOperator, doOperator, finallyOperator, map, RxChain, share} from '@angular/cdk/rxjs';
 import {Injectable, Optional, SecurityContext, SkipSelf} from '@angular/core';
-import {Http} from '@angular/http';
+import {HttpClient} from '@angular/common/http';
 import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
 import {Observable} from 'rxjs/Observable';
 import {forkJoin} from 'rxjs/observable/forkJoin';
@@ -32,8 +32,9 @@ export function getMatIconNameNotFoundError(iconName: string): Error {
  * @docs-private
  */
 export function getMatIconNoHttpProviderError(): Error {
-  return Error('Could not find Http provider for use with Angular Material icons. ' +
-               'Please include the HttpModule from @angular/http in your app imports.');
+  return Error('Could not find HttpClient provider for use with Angular Material icons. ' +
+               'Please include the HttpClientModule from @angular/common/http in your ' +
+               'app imports.');
 }
 
 
@@ -92,7 +93,7 @@ export class MatIconRegistry {
    */
   private _defaultFontSetClass = 'material-icons';
 
-  constructor(@Optional() private _http: Http, private _sanitizer: DomSanitizer) {}
+  constructor(@Optional() private _httpClient: HttpClient, private _sanitizer: DomSanitizer) {}
 
   /**
    * Registers an icon by URL in the default namespace.
@@ -442,7 +443,7 @@ export class MatIconRegistry {
    * cached, so future calls with the same URL may not cause another HTTP request.
    */
   private _fetchUrl(safeUrl: SafeResourceUrl): Observable<string> {
-    if (!this._http) {
+    if (!this._httpClient) {
       throw getMatIconNoHttpProviderError();
     }
 
@@ -463,8 +464,7 @@ export class MatIconRegistry {
 
     // TODO(jelbourn): for some reason, the `finally` operator "loses" the generic type on the
     // Observable. Figure out why and fix it.
-    const req = RxChain.from(this._http.get(url))
-      .call(map, response => response.text())
+    const req = RxChain.from(this._httpClient.get(url, { responseType: 'text' }))
       .call(finallyOperator, () => this._inProgressUrlFetches.delete(url))
       .call(share)
       .result();
@@ -476,15 +476,19 @@ export class MatIconRegistry {
 
 /** @docs-private */
 export function ICON_REGISTRY_PROVIDER_FACTORY(
-    parentRegistry: MatIconRegistry, http: Http, sanitizer: DomSanitizer) {
-  return parentRegistry || new MatIconRegistry(http, sanitizer);
+    parentRegistry: MatIconRegistry, httpClient: HttpClient, sanitizer: DomSanitizer) {
+  return parentRegistry || new MatIconRegistry(httpClient, sanitizer);
 }
 
 /** @docs-private */
 export const ICON_REGISTRY_PROVIDER = {
-  // If there is already an MatIconRegistry available, use that. Otherwise, provide a new one.
+  // If there is already an MdIconRegistry available, use that. Otherwise, provide a new one.
   provide: MatIconRegistry,
-  deps: [[new Optional(), new SkipSelf(), MatIconRegistry], [new Optional(), Http], DomSanitizer],
+  deps: [
+    [new Optional(), new SkipSelf(), MatIconRegistry],
+    [new Optional(), HttpClient],
+    DomSanitizer
+  ],
   useFactory: ICON_REGISTRY_PROVIDER_FACTORY
 };
 

src/lib/icon/icon.spec.ts

@@ -1,11 +1,10 @@
 import {inject, async, fakeAsync, tick, TestBed} from '@angular/core/testing';
 import {SafeResourceUrl, DomSanitizer} from '@angular/platform-browser';
-import {HttpModule, XHRBackend} from '@angular/http';
-import {MockBackend} from '@angular/http/testing';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
 import {Component} from '@angular/core';
 import {MatIconModule} from './index';
 import {MatIconRegistry, getMatIconNoHttpProviderError} from './icon-registry';
-import {getFakeSvgHttpResponse} from './fake-svgs';
+import {FAKE_SVGS} from './fake-svgs';
 import {wrappedErrorMessage} from '@angular/cdk/testing';
 
 
@@ -40,7 +39,7 @@ describe('MatIcon', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [HttpModule, MatIconModule],
+      imports: [HttpClientTestingModule, MatIconModule],
       declarations: [
         IconWithColor,
         IconWithLigature,
@@ -48,10 +47,6 @@ describe('MatIcon', () => {
         IconFromSvgName,
         IconWithAriaHiddenFalse,
         IconWithBindingAndNgIf,
-      ],
-      providers: [
-        MockBackend,
-        {provide: XHRBackend, useExisting: MockBackend},
       ]
     });
 
@@ -59,22 +54,15 @@ describe('MatIcon', () => {
   }));
 
   let iconRegistry: MatIconRegistry;
+  let http: HttpTestingController;
   let sanitizer: DomSanitizer;
-  let httpRequestUrls: string[];
 
-  let deps = [MatIconRegistry, MockBackend, DomSanitizer];
-  beforeEach(inject(deps, (mir: MatIconRegistry, mockBackend: MockBackend, ds: DomSanitizer) => {
-    iconRegistry = mir;
-    sanitizer = ds;
-    // Keep track of requests so we can verify caching behavior.
-    // Return responses for the SVGs defined in fake-svgs.ts.
-    httpRequestUrls = [];
-    mockBackend.connections.subscribe((connection: any) => {
-      const url = connection.request.url;
-      httpRequestUrls.push(url);
-      connection.mockRespond(getFakeSvgHttpResponse(url));
-    });
-  }));
+  beforeEach(inject([MatIconRegistry, HttpTestingController, DomSanitizer],
+    (mir: MatIconRegistry, h: HttpTestingController, ds: DomSanitizer) => {
+      iconRegistry = mir;
+      http = h;
+      sanitizer = ds;
+    }));
 
   it('should apply class based on color attribute', () => {
     let fixture = TestBed.createComponent(IconWithColor);
@@ -131,28 +119,29 @@ describe('MatIcon', () => {
       iconRegistry.addSvgIcon('fido', trust('dog.svg'));
 
       let fixture = TestBed.createComponent(IconFromSvgName);
-      const testComponent = fixture.componentInstance;
-      const matIconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
       let svgElement: SVGElement;
+      const testComponent = fixture.componentInstance;
+      const mdIconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
 
       testComponent.iconName = 'fido';
       fixture.detectChanges();
-      svgElement = verifyAndGetSingleSvgChild(matIconElement);
+      http.expectOne('dog.svg').flush(FAKE_SVGS.dog);
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
       verifyPathChildElement(svgElement, 'woof');
 
       // Change the icon, and the SVG element should be replaced.
       testComponent.iconName = 'fluffy';
       fixture.detectChanges();
-      svgElement = verifyAndGetSingleSvgChild(matIconElement);
+      http.expectOne('cat.svg').flush(FAKE_SVGS.cat);
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
       verifyPathChildElement(svgElement, 'meow');
 
-      expect(httpRequestUrls).toEqual(['dog.svg', 'cat.svg']);
       // Using an icon from a previously loaded URL should not cause another HTTP request.
       testComponent.iconName = 'fido';
       fixture.detectChanges();
-      svgElement = verifyAndGetSingleSvgChild(matIconElement);
+      http.expectNone('dog.svg');
+      svgElement = verifyAndGetSingleSvgChild(mdIconElement);
       verifyPathChildElement(svgElement, 'woof');
-      expect(httpRequestUrls).toEqual(['dog.svg', 'cat.svg']);
 
       // Assert that a registered icon can be looked-up by url.
       iconRegistry.getSvgIconFromUrl(trust('cat.svg')).subscribe(element => {
@@ -185,8 +174,7 @@ describe('MatIcon', () => {
     it('should extract icon from SVG icon set', () => {
       iconRegistry.addSvgIconSetInNamespace('farm', trust('farm-set-1.svg'));
 
-      let fixture = TestBed.createComponent(IconFromSvgName);
-
+      const fixture = TestBed.createComponent(IconFromSvgName);
       const testComponent = fixture.componentInstance;
       const matIconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
       let svgElement: any;
@@ -194,6 +182,7 @@ describe('MatIcon', () => {
 
       testComponent.iconName = 'farm:pig';
       fixture.detectChanges();
+      http.expectOne('farm-set-1.svg').flush(FAKE_SVGS.farmSet1);
 
       expect(matIconElement.childNodes.length).toBe(1);
       svgElement = verifyAndGetSingleSvgChild(matIconElement);
@@ -218,10 +207,8 @@ describe('MatIcon', () => {
     it('should allow multiple icon sets in a namespace', () => {
       iconRegistry.addSvgIconSetInNamespace('farm', trust('farm-set-1.svg'));
       iconRegistry.addSvgIconSetInNamespace('farm', trust('farm-set-2.svg'));
-      iconRegistry.addSvgIconSetInNamespace('arrows', trust('arrow-set.svg'));
-
-      let fixture = TestBed.createComponent(IconFromSvgName);
 
+      const fixture = TestBed.createComponent(IconFromSvgName);
       const testComponent = fixture.componentInstance;
       const matIconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
       let svgElement: any;
@@ -229,6 +216,9 @@ describe('MatIcon', () => {
 
       testComponent.iconName = 'farm:pig';
       fixture.detectChanges();
+      http.expectOne('farm-set-1.svg').flush(FAKE_SVGS.farmSet1);
+      http.expectOne('farm-set-2.svg').flush(FAKE_SVGS.farmSet2);
+
       svgElement = verifyAndGetSingleSvgChild(matIconElement);
       expect(svgElement.childNodes.length).toBe(1);
       svgChild = svgElement.childNodes[0];
@@ -238,9 +228,6 @@ describe('MatIcon', () => {
       expect(svgChild.childNodes.length).toBe(1);
       verifyPathChildElement(svgChild, 'oink');
 
-      // Both icon sets registered in the 'farm' namespace should have been fetched.
-      expect(httpRequestUrls.sort()).toEqual(['farm-set-1.svg', 'farm-set-2.svg']);
-
       // Change the icon name to one that appears in both icon sets. The icon from the set that
       // was registered last should be used (with id attribute of 'moo moo' instead of 'moo'),
       // and no additional HTTP request should be made.
@@ -253,7 +240,6 @@ describe('MatIcon', () => {
       expect(svgChild.getAttribute('id')).toBe('cow');
       expect(svgChild.childNodes.length).toBe(1);
       verifyPathChildElement(svgChild, 'moo moo');
-      expect(httpRequestUrls.sort()).toEqual(['farm-set-1.svg', 'farm-set-2.svg']);
     });
 
     it('should unwrap <symbol> nodes', () => {
@@ -265,6 +251,7 @@ describe('MatIcon', () => {
 
       testComponent.iconName = 'farm:duck';
       fixture.detectChanges();
+      http.expectOne('farm-set-3.svg').flush(FAKE_SVGS.farmSet3);
 
       const svgElement = verifyAndGetSingleSvgChild(matIconElement);
       const firstChild = svgElement.childNodes[0];
@@ -278,14 +265,15 @@ describe('MatIcon', () => {
     it('should not wrap <svg> elements in icon sets in another svg tag', () => {
       iconRegistry.addSvgIconSet(trust('arrow-set.svg'));
 
-      let fixture = TestBed.createComponent(IconFromSvgName);
-
+      const fixture = TestBed.createComponent(IconFromSvgName);
       const testComponent = fixture.componentInstance;
       const matIconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
       let svgElement: any;
 
       testComponent.iconName = 'left-arrow';
       fixture.detectChanges();
+      http.expectOne('arrow-set.svg').flush(FAKE_SVGS.arrows);
+
       // arrow-set.svg stores its icons as nested <svg> elements, so they should be used
       // directly and not wrapped in an outer <svg> tag like the <g> elements in other sets.
       svgElement = verifyAndGetSingleSvgChild(matIconElement);
@@ -295,14 +283,14 @@ describe('MatIcon', () => {
     it('should return unmodified copies of icons from icon sets', () => {
       iconRegistry.addSvgIconSet(trust('arrow-set.svg'));
 
-      let fixture = TestBed.createComponent(IconFromSvgName);
-
+      const fixture = TestBed.createComponent(IconFromSvgName);
       const testComponent = fixture.componentInstance;
       const matIconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
       let svgElement: any;
 
       testComponent.iconName = 'left-arrow';
       fixture.detectChanges();
+      http.expectOne('arrow-set.svg').flush(FAKE_SVGS.arrows);
       svgElement = verifyAndGetSingleSvgChild(matIconElement);
       verifyPathChildElement(svgElement, 'left');
       // Modify the SVG element by setting a viewBox attribute.
@@ -328,6 +316,7 @@ describe('MatIcon', () => {
       const fixture = TestBed.createComponent(IconWithBindingAndNgIf);
 
       fixture.detectChanges();
+      http.expectOne('cat.svg').flush(FAKE_SVGS.cat);
 
       expect(() => {
         fixture.componentInstance.showIcon = false;
@@ -348,6 +337,7 @@ describe('MatIcon', () => {
 
       testComponent.iconName = 'left-arrow';
       fixture.detectChanges();
+      http.expectOne('arrow-set.svg').flush(FAKE_SVGS.arrows);
 
       expect(icon.querySelector('svg')).toBeTruthy();
 
@@ -392,7 +382,7 @@ describe('MatIcon', () => {
 });
 
 
-describe('MatIcon without HttpModule', () => {
+describe('MatIcon without HttpClientModule', () => {
   let iconRegistry: MatIconRegistry;
   let sanitizer: DomSanitizer;
 

src/material-examples/package.json

@@ -26,7 +26,6 @@
     "@angular/cdk": "0.0.0-PLACEHOLDER",
     "@angular/core": "0.0.0-NG",
     "@angular/common": "0.0.0-NG",
-    "@angular/http": "0.0.0-NG",
     "@angular/material": "0.0.0-PLACEHOLDER",
     "@angular/material-moment-adapter": "0.0.0-PLACEHOLDER"
   },

src/material-examples/table-http/table-http-example.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {Http} from '@angular/http';
+import {HttpClient} from '@angular/common/http';
 import {DataSource} from '@angular/cdk/collections';
 import {MatPaginator, MatSort} from '@angular/material';
 import {Observable} from 'rxjs/Observable';
@@ -20,16 +20,16 @@ import 'rxjs/add/operator/switchMap';
 })
 export class TableHttpExample implements OnInit {
   displayedColumns = ['created_at', 'state', 'number', 'title'];
-  exampleDatabase: ExampleHttpDao | null;
+  exampleDatabase: ExampleHttpDataSource | null;
   dataSource: ExampleDataSource | null;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
-  constructor(private http: Http) {}
+  constructor(private _httpClient: HttpClient) {}
 
   ngOnInit() {
-    this.exampleDatabase = new ExampleHttpDao(this.http);
+    this.exampleDatabase = new ExampleHttpDataSource(this._httpClient);
     this.dataSource = new ExampleDataSource(
       this.exampleDatabase!, this.paginator, this.sort);
   }
@@ -48,16 +48,15 @@ export interface GithubIssue {
 }
 
 /** An example database that the data source uses to retrieve data for the table. */
-export class ExampleHttpDao {
-  constructor(private http: Http) {}
+export class ExampleHttpDataSource {
+  constructor(private _httpClient: HttpClient) {}
 
   getRepoIssues(sort: string, order: string, page: number): Observable<GithubApi> {
     const href = 'https://api.github.com/search/issues';
     const requestUrl =
       `${href}?q=repo:angular/material2&sort=${sort}&order=${order}&page=${page + 1}`;
 
-    return this.http.get(requestUrl)
-                    .map(response => response.json() as GithubApi);
+    return this._httpClient.get<GithubApi>(requestUrl);
   }
 }
 
@@ -74,7 +73,7 @@ export class ExampleDataSource extends DataSource<GithubIssue> {
   isLoadingResults = false;
   isRateLimitReached = false;
 
-  constructor(private exampleDatabase: ExampleHttpDao,
+  constructor(private exampleDatabase: ExampleHttpDataSource,
               private paginator: MatPaginator,
               private sort: MatSort) {
     super();

test/karma-test-shim.js

@@ -20,6 +20,7 @@ System.config({
   map: {
     'rxjs': 'node:rxjs',
     'main': 'main.js',
+    'tslib': 'node:tslib/tslib.js',
     'moment': 'node:moment/min/moment-with-locales.min.js',
 
     // Angular specific mappings.
@@ -27,10 +28,10 @@ System.config({
     '@angular/core/testing': 'node:@angular/core/bundles/core-testing.umd.js',
     '@angular/common': 'node:@angular/common/bundles/common.umd.js',
     '@angular/common/testing': 'node:@angular/common/bundles/common-testing.umd.js',
+    '@angular/common/http': 'node:@angular/common/bundles/common-http.umd.js',
+    '@angular/common/http/testing': 'node:@angular/common/bundles/common-http-testing.umd.js',
     '@angular/compiler': 'node:@angular/compiler/bundles/compiler.umd.js',
     '@angular/compiler/testing': 'node:@angular/compiler/bundles/compiler-testing.umd.js',
-    '@angular/http': 'node:@angular/http/bundles/http.umd.js',
-    '@angular/http/testing': 'node:@angular/http/bundles/http-testing.umd.js',
     '@angular/forms': 'node:@angular/forms/bundles/forms.umd.js',
     '@angular/forms/testing': 'node:@angular/forms/bundles/forms-testing.umd.js',
     '@angular/animations': 'node:@angular/animations/bundles/animations.umd.js',

test/karma.conf.js

@@ -17,6 +17,7 @@ module.exports = (config) => {
     ],
     files: [
       {pattern: 'node_modules/core-js/client/core.js', included: true, watched: false},
+      {pattern: 'node_modules/tslib/tslib.js', included: true, watched: false},
       {pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: false},
       {pattern: 'node_modules/zone.js/dist/zone.js', included: true, watched: false},
       {pattern: 'node_modules/zone.js/dist/proxy.js', included: true, watched: false},

tools/dashboard/package.json

@@ -16,7 +16,6 @@
     "@angular/compiler": "^4.4.4",
     "@angular/core": "^4.4.4",
     "@angular/forms": "^4.4.4",
-    "@angular/http": "^4.4.4",
     "@angular/material": "github:angular/material2-builds",
     "@angular/platform-browser": "^4.4.4",
     "@angular/platform-browser-dynamic": "^4.4.4",

tools/package-tools/rollup-globals.ts

@@ -32,7 +32,7 @@ export const rollupGlobals = {
   '@angular/core': 'ng.core',
   '@angular/common': 'ng.common',
   '@angular/forms': 'ng.forms',
-  '@angular/http': 'ng.http',
+  '@angular/common/http': 'ng.common.http',
   '@angular/router': 'ng.router',
   '@angular/platform-browser': 'ng.platformBrowser',
   '@angular/platform-server': 'ng.platformServer',
@@ -40,7 +40,7 @@ export const rollupGlobals = {
   '@angular/platform-browser/animations': 'ng.platformBrowser.animations',
   '@angular/core/testing': 'ng.core.testing',
   '@angular/common/testing': 'ng.common.testing',
-  '@angular/http/testing': 'ng.http.testing',
+  '@angular/common/http/testing': 'ng.common.http.testing',
 
   // Some packages are not really needed for the UMD bundles, but for the missingRollupGlobals rule.
   '@angular/material-examples': 'ng.materialExamples',

tools/screenshot-test/package.json

@@ -16,7 +16,6 @@
     "@angular/compiler-cli": "^4.4.4",
     "@angular/core": "^4.4.4",
     "@angular/forms": "^4.4.4",
-    "@angular/http": "^4.4.4",
     "@angular/material": "angular/material2-builds",
     "@angular/platform-browser": "^4.4.4",
     "@angular/platform-browser-dynamic": "^4.4.4",

tools/screenshot-test/src/app/firebase.service.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {Http} from '@angular/http';
+import {HttpClient} from '@angular/common/http';
 import * as firebase from 'firebase';
 import 'rxjs/add/operator/toPromise';
 
@@ -17,7 +17,7 @@ export class FirebaseService {
   /** The screenshot results */
   screenshotResultSummary: ScreenshotResultSummary;
 
-  constructor(private _http: Http) {
+  constructor(private _httpClient: HttpClient) {
     // Initialize Firebase
     firebase.initializeApp(config.firebase);
 
@@ -157,19 +157,17 @@ export class FirebaseService {
     let url =
       `https://api.github.com/repos/${config.repoSlug}/commits/` +
       `${this.screenshotResultSummary.sha}/status`;
-    return this._http.get(url).toPromise()
-      .then((response) => {
-        let statusResponse = response.json();
-        let screenshotStatus = statusResponse.statuses.find((status) =>
-          status.context === 'Screenshot Tests');
-        switch (screenshotStatus && screenshotStatus.state) {
-          case 'success':
-            this.screenshotResultSummary.githubStatus = true;
-            break;
-          case 'failure':
-            this.screenshotResultSummary.githubStatus = false;
-            return;
-        }
-      });
+    return this._httpClient.get<{statuses: any[]}>(url).toPromise().then(response => {
+      const screenshotStatus = response.statuses.find(status =>
+        status.context === 'Screenshot Tests');
+      switch (screenshotStatus && screenshotStatus.state) {
+        case 'success':
+          this.screenshotResultSummary.githubStatus = true;
+          break;
+        case 'failure':
+          this.screenshotResultSummary.githubStatus = false;
+          return;
+      }
+    });
   }
 }

tools/screenshot-test/src/app/pixacto.dashboard.module.ts

@@ -1,7 +1,7 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {HttpModule} from '@angular/http';
+import {HttpClientModule} from '@angular/common/http';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {FirebaseService} from './firebase.service';
 import {routing} from './routes';
@@ -39,7 +39,7 @@ export class PixactoMaterialModule {}
     BrowserModule,
     BrowserAnimationsModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
     PixactoMaterialModule,
     routing,
   ],