From 0ea43700efb105aa02ad3b1d3f800bf4a9925883 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 24 Oct 2017 19:42:35 +0200 Subject: [PATCH] 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 | 2 +- .../closure-compiler/build-devapp-bundle.sh | 4 +- src/demo-app/demo-app-module.ts | 4 +- src/demo-app/system-config.ts | 3 +- src/e2e-app/system-config.ts | 3 +- src/lib/icon/fake-svgs.ts | 96 +++++++------------ src/lib/icon/icon-registry.ts | 26 ++--- src/lib/icon/icon.spec.ts | 76 +++++++-------- src/material-examples/package.json | 1 - .../table-http/table-http-example.ts | 17 ++-- test/karma-test-shim.js | 5 +- test/karma.conf.js | 1 + tools/dashboard/package.json | 1 - tools/package-tools/rollup-globals.ts | 4 +- tools/screenshot-test/package.json | 1 - .../src/app/firebase.service.ts | 30 +++--- .../src/app/pixacto.dashboard.module.ts | 4 +- 17 files changed, 121 insertions(+), 157 deletions(-) diff --git a/package.json b/package.json index 751486727401..511c60e3aaea 100644 --- a/package.json +++ b/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", diff --git a/scripts/closure-compiler/build-devapp-bundle.sh b/scripts/closure-compiler/build-devapp-bundle.sh index f0efff42b318..0ef948ca2e8a 100755 --- a/scripts/closure-compiler/build-devapp-bundle.sh +++ b/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 diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts index 185fc2cad874..11b9268e16bd 100644 --- a/src/demo-app/demo-app-module.ts +++ b/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), diff --git a/src/demo-app/system-config.ts b/src/demo-app/system-config.ts index b42b8b36c17a..bd6c644d9bb7 100644 --- a/src/demo-app/system-config.ts +++ b/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', diff --git a/src/e2e-app/system-config.ts b/src/e2e-app/system-config.ts index 2e79b7f50120..4a6d5613faa2 100644 --- a/src/e2e-app/system-config.ts +++ b/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', diff --git a/src/lib/icon/fake-svgs.ts b/src/lib/icon/fake-svgs.ts index cce128143837..6d38254123ca 100644 --- a/src/lib/icon/fake-svgs.ts +++ b/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(); - svgs.set('cat.svg', - ''); - - svgs.set('dog.svg', - ''); - - svgs.set('farm-set-1.svg', ` - - - - - - - `); - - svgs.set('farm-set-2.svg', ` - - - - - - - `); - - svgs.set('farm-set-3.svg', ` - - - - - - `); - - svgs.set('arrow-set.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: '', + dog: '', + farmSet1: ` + + + + + + + `, + farmSet2: ` + + + + + + + `, + farmSet3: ` + + + + + + `, + arrows: ` + + + + + + ` +}; diff --git a/src/lib/icon/icon-registry.ts b/src/lib/icon/icon-registry.ts index 6c736a4a48c2..5b7ae760bb2e 100644 --- a/src/lib/icon/icon-registry.ts +++ b/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 { - 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 }; diff --git a/src/lib/icon/icon.spec.ts b/src/lib/icon/icon.spec.ts index b84adc46734e..4b34fd0c0ebb 100644 --- a/src/lib/icon/icon.spec.ts +++ b/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 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 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 elements, so they should be used // directly and not wrapped in an outer tag like the 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; diff --git a/src/material-examples/package.json b/src/material-examples/package.json index e27be11e754c..958a86fc1e86 100644 --- a/src/material-examples/package.json +++ b/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" }, diff --git a/src/material-examples/table-http/table-http-example.ts b/src/material-examples/table-http/table-http-example.ts index 1283f2b890a2..8dd5f2d36265 100644 --- a/src/material-examples/table-http/table-http-example.ts +++ b/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 { 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(requestUrl); } } @@ -74,7 +73,7 @@ export class ExampleDataSource extends DataSource { isLoadingResults = false; isRateLimitReached = false; - constructor(private exampleDatabase: ExampleHttpDao, + constructor(private exampleDatabase: ExampleHttpDataSource, private paginator: MatPaginator, private sort: MatSort) { super(); diff --git a/test/karma-test-shim.js b/test/karma-test-shim.js index a8d31ac482ff..55335ad0e3a4 100644 --- a/test/karma-test-shim.js +++ b/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', diff --git a/test/karma.conf.js b/test/karma.conf.js index 084ca759df91..30399610d2ab 100644 --- a/test/karma.conf.js +++ b/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}, diff --git a/tools/dashboard/package.json b/tools/dashboard/package.json index 6f40ff784e83..50efa57f3891 100644 --- a/tools/dashboard/package.json +++ b/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", diff --git a/tools/package-tools/rollup-globals.ts b/tools/package-tools/rollup-globals.ts index 4409759e6ce2..2748e7c5f209 100644 --- a/tools/package-tools/rollup-globals.ts +++ b/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', diff --git a/tools/screenshot-test/package.json b/tools/screenshot-test/package.json index 5ec860168667..13f79650e3a5 100644 --- a/tools/screenshot-test/package.json +++ b/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", diff --git a/tools/screenshot-test/src/app/firebase.service.ts b/tools/screenshot-test/src/app/firebase.service.ts index fed28b72a409..3fcb235b2bb1 100644 --- a/tools/screenshot-test/src/app/firebase.service.ts +++ b/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; + } + }); } } diff --git a/tools/screenshot-test/src/app/pixacto.dashboard.module.ts b/tools/screenshot-test/src/app/pixacto.dashboard.module.ts index 03e1f733edb9..a20f03989c89 100644 --- a/tools/screenshot-test/src/app/pixacto.dashboard.module.ts +++ b/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, ],