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`.

Author: crisbeto

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
 };