From 7b57d75e1be3665880b7382fc001e09915b74355 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Tue, 29 Aug 2017 21:04:27 +0200 Subject: [PATCH] refactor: switch to HttpClient 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 | 28 +++--- src/lib/icon/icon.spec.ts | 68 ++++++------- src/material-examples/package.json | 1 - .../table-http/table-http-example.ts | 19 ++-- 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, 119 insertions(+), 155 deletions(-) diff --git a/package.json b/package.json index d7be6be388fb..903acc6a5408 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "@angular/compiler": "~4.3.6", "@angular/core": "~4.3.6", "@angular/forms": "~4.3.6", - "@angular/http": "~4.3.6", "@angular/platform-browser": "~4.3.6", "core-js": "^2.4.1", "rxjs": "^5.0.1", @@ -41,6 +40,7 @@ }, "devDependencies": { "@angular/compiler-cli": "~4.3.6", + "@angular/http": "~4.3.6", "@angular/platform-browser-dynamic": "~4.3.6", "@angular/platform-server": "~4.3.6", "@angular/router": "~4.3.6", diff --git a/scripts/closure-compiler/build-devapp-bundle.sh b/scripts/closure-compiler/build-devapp-bundle.sh index 8e483922b3fc..d2c2d6236fa1 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 b0d3e33cf61b..402057bfea54 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 96b0a3d3e9e3..68858b3ec67a 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/router': 'node:@angular/router/bundles/router.umd.js', '@angular/animations': 'node:@angular/animations/bundles/animations.umd.js', diff --git a/src/e2e-app/system-config.ts b/src/e2e-app/system-config.ts index 75700c38fcfc..5248c35d793e 100644 --- a/src/e2e-app/system-config.ts +++ b/src/e2e-app/system-config.ts @@ -9,12 +9,13 @@ System.config({ map: { 'rxjs': 'node:rxjs', 'main': 'main.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 c4acf7c7e18c..94ecbd12a3d9 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 ccc46cb09148..7d8e3c0d9f66 100644 --- a/src/lib/icon/icon-registry.ts +++ b/src/lib/icon/icon-registry.ts @@ -8,7 +8,7 @@ import {Injectable, SecurityContext, Optional, SkipSelf} from '@angular/core'; import {SafeResourceUrl, DomSanitizer} from '@angular/platform-browser'; -import {Http} from '@angular/http'; +import {HttpClient} from '@angular/common/http'; import {Observable} from 'rxjs/Observable'; import {_throw as observableThrow} from 'rxjs/observable/throw'; import {of as observableOf} from 'rxjs/observable/of'; @@ -27,12 +27,13 @@ export function getMdIconNameNotFoundError(iconName: string): Error { /** * Returns an exception to be thrown when the consumer attempts to use - * `` without including @angular/http. + * `` without including @angular/common/http. * @docs-private */ export function getMdIconNoHttpProviderError(): 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 the HttpClient provider for use with Angular Material icons. ' + + 'Please include the HttpClientModule from @angular/common/http in your ' + + 'app imports.'); } @@ -91,7 +92,7 @@ export class MdIconRegistry { */ 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. @@ -272,7 +273,7 @@ export class MdIconRegistry { // Not found in any cached icon sets. If there are icon sets with URLs that we haven't // fetched, fetch them now and look for iconName in the results. - const iconSetFetchRequests: Observable[] = iconSetConfigs + const iconSetFetchRequests: Observable[] = iconSetConfigs .filter(iconSetConfig => !iconSetConfig.svgElement) .map(iconSetConfig => { return RxChain.from(this._loadSvgIconSetFromConfig(iconSetConfig)) @@ -441,7 +442,7 @@ export class MdIconRegistry { * 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 getMdIconNoHttpProviderError(); } @@ -462,8 +463,7 @@ export class MdIconRegistry { // 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(); @@ -475,15 +475,19 @@ export class MdIconRegistry { /** @docs-private */ export function ICON_REGISTRY_PROVIDER_FACTORY( - parentRegistry: MdIconRegistry, http: Http, sanitizer: DomSanitizer) { - return parentRegistry || new MdIconRegistry(http, sanitizer); + parentRegistry: MdIconRegistry, httpClient: HttpClient, sanitizer: DomSanitizer) { + return parentRegistry || new MdIconRegistry(httpClient, sanitizer); } /** @docs-private */ export const ICON_REGISTRY_PROVIDER = { // If there is already an MdIconRegistry available, use that. Otherwise, provide a new one. provide: MdIconRegistry, - deps: [[new Optional(), new SkipSelf(), MdIconRegistry], [new Optional(), Http], DomSanitizer], + deps: [ + [new Optional(), new SkipSelf(), MdIconRegistry], + [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 952e2b70185e..ee05799cc6d3 100644 --- a/src/lib/icon/icon.spec.ts +++ b/src/lib/icon/icon.spec.ts @@ -1,11 +1,10 @@ import {inject, async, 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 {MdIconModule} from './index'; import {MdIconRegistry, getMdIconNoHttpProviderError} 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('MdIcon', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [HttpModule, MdIconModule], + imports: [HttpClientTestingModule, MdIconModule], declarations: [ IconWithColor, IconWithLigature, @@ -48,10 +47,6 @@ describe('MdIcon', () => { IconFromSvgName, IconWithAriaHiddenFalse, IconWithBindingAndNgIf, - ], - providers: [ - MockBackend, - {provide: XHRBackend, useExisting: MockBackend}, ] }); @@ -59,22 +54,15 @@ describe('MdIcon', () => { })); let mdIconRegistry: MdIconRegistry; + let http: HttpTestingController; let sanitizer: DomSanitizer; - let httpRequestUrls: string[]; - let deps = [MdIconRegistry, MockBackend, DomSanitizer]; - beforeEach(inject(deps, (mir: MdIconRegistry, mockBackend: MockBackend, ds: DomSanitizer) => { - mdIconRegistry = 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([MdIconRegistry, HttpTestingController, DomSanitizer], + (mir: MdIconRegistry, h: HttpTestingController, ds: DomSanitizer) => { + mdIconRegistry = mir; + http = h; + sanitizer = ds; + })); it('should apply class based on color attribute', () => { let fixture = TestBed.createComponent(IconWithColor); @@ -131,28 +119,29 @@ describe('MdIcon', () => { mdIconRegistry.addSvgIcon('fido', trust('dog.svg')); let fixture = TestBed.createComponent(IconFromSvgName); + let svgElement: SVGElement; const testComponent = fixture.componentInstance; const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon'); - let svgElement: SVGElement; testComponent.iconName = 'fido'; fixture.detectChanges(); + 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(); + 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(); + http.expectNone('dog.svg'); svgElement = verifyAndGetSingleSvgChild(mdIconElement); verifyPathChildElement(svgElement, 'woof'); - expect(httpRequestUrls).toEqual(['dog.svg', 'cat.svg']); }); it('should throw an error when using an untrusted icon url', () => { @@ -178,8 +167,7 @@ describe('MdIcon', () => { it('should extract icon from SVG icon set', () => { mdIconRegistry.addSvgIconSetInNamespace('farm', trust('farm-set-1.svg')); - let fixture = TestBed.createComponent(IconFromSvgName); - + const fixture = TestBed.createComponent(IconFromSvgName); const testComponent = fixture.componentInstance; const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon'); let svgElement: any; @@ -187,6 +175,7 @@ describe('MdIcon', () => { testComponent.iconName = 'farm:pig'; fixture.detectChanges(); + http.expectOne('farm-set-1.svg').flush(FAKE_SVGS.farmSet1); expect(mdIconElement.childNodes.length).toBe(1); svgElement = verifyAndGetSingleSvgChild(mdIconElement); @@ -211,10 +200,8 @@ describe('MdIcon', () => { it('should allow multiple icon sets in a namespace', () => { mdIconRegistry.addSvgIconSetInNamespace('farm', trust('farm-set-1.svg')); mdIconRegistry.addSvgIconSetInNamespace('farm', trust('farm-set-2.svg')); - mdIconRegistry.addSvgIconSetInNamespace('arrows', trust('arrow-set.svg')); - - let fixture = TestBed.createComponent(IconFromSvgName); + const fixture = TestBed.createComponent(IconFromSvgName); const testComponent = fixture.componentInstance; const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon'); let svgElement: any; @@ -222,6 +209,9 @@ describe('MdIcon', () => { 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(mdIconElement); expect(svgElement.childNodes.length).toBe(1); svgChild = svgElement.childNodes[0]; @@ -231,9 +221,6 @@ describe('MdIcon', () => { 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. @@ -246,7 +233,6 @@ describe('MdIcon', () => { 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', () => { @@ -258,6 +244,7 @@ describe('MdIcon', () => { testComponent.iconName = 'farm:duck'; fixture.detectChanges(); + http.expectOne('farm-set-3.svg').flush(FAKE_SVGS.farmSet3); const svgElement = verifyAndGetSingleSvgChild(mdIconElement); const firstChild = svgElement.childNodes[0]; @@ -271,14 +258,15 @@ describe('MdIcon', () => { it('should not wrap elements in icon sets in another svg tag', () => { mdIconRegistry.addSvgIconSet(trust('arrow-set.svg')); - let fixture = TestBed.createComponent(IconFromSvgName); - + const fixture = TestBed.createComponent(IconFromSvgName); const testComponent = fixture.componentInstance; const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-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(mdIconElement); @@ -288,14 +276,14 @@ describe('MdIcon', () => { it('should return unmodified copies of icons from icon sets', () => { mdIconRegistry.addSvgIconSet(trust('arrow-set.svg')); - let fixture = TestBed.createComponent(IconFromSvgName); - + const fixture = TestBed.createComponent(IconFromSvgName); const testComponent = fixture.componentInstance; const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon'); let svgElement: any; testComponent.iconName = 'left-arrow'; fixture.detectChanges(); + http.expectOne('arrow-set.svg').flush(FAKE_SVGS.arrows); svgElement = verifyAndGetSingleSvgChild(mdIconElement); verifyPathChildElement(svgElement, 'left'); // Modify the SVG element by setting a viewBox attribute. @@ -321,6 +309,7 @@ describe('MdIcon', () => { const fixture = TestBed.createComponent(IconWithBindingAndNgIf); fixture.detectChanges(); + http.expectOne('cat.svg').flush(FAKE_SVGS.cat); expect(() => { fixture.componentInstance.showIcon = false; @@ -341,6 +330,7 @@ describe('MdIcon', () => { testComponent.iconName = 'left-arrow'; fixture.detectChanges(); + http.expectOne('arrow-set.svg').flush(FAKE_SVGS.arrows); expect(icon.querySelector('svg')).toBeTruthy(); @@ -385,7 +375,7 @@ describe('MdIcon', () => { }); -describe('MdIcon without HttpModule', () => { +describe('MdIcon without HttpClientModule', () => { let mdIconRegistry: MdIconRegistry; let sanitizer: DomSanitizer; diff --git a/src/material-examples/package.json b/src/material-examples/package.json index e4f029d0dfa4..9bf00d3e7524 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": "^4.3.0", "@angular/common": "^4.3.0", - "@angular/http": "^4.3.0", "@angular/material": "0.0.0-PLACEHOLDER" }, "dependencies": { diff --git a/src/material-examples/table-http/table-http-example.ts b/src/material-examples/table-http/table-http-example.ts index 34389b71561e..2c349da257e3 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 {MdPaginator, MdSort} 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(MdPaginator) paginator: MdPaginator; @ViewChild(MdSort) sort: MdSort; - 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: MdPaginator, private sort: MdSort) { super(); @@ -109,7 +108,7 @@ export class ExampleDataSource extends DataSource { this.isLoadingResults = false; // Catch if the GitHub API has reached its rate limit. Return empty data. this.isRateLimitReached = true; - return Observable.of(null); + return Observable.of([]); }); } diff --git a/test/karma-test-shim.js b/test/karma-test-shim.js index 51fb7450022c..df210d6d76c4 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 b2b39d0c7185..0d7c7a8fe71c 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 80d727acacbc..1b8f236bfddc 100644 --- a/tools/dashboard/package.json +++ b/tools/dashboard/package.json @@ -16,7 +16,6 @@ "@angular/compiler": "^4.2.6", "@angular/core": "^4.2.6", "@angular/forms": "^4.2.6", - "@angular/http": "^4.2.6", "@angular/material": "github:angular/material2-builds", "@angular/platform-browser": "^4.2.6", "@angular/platform-browser-dynamic": "^4.2.6", diff --git a/tools/package-tools/rollup-globals.ts b/tools/package-tools/rollup-globals.ts index 7800d3530c51..7538b6df8d46 100644 --- a/tools/package-tools/rollup-globals.ts +++ b/tools/package-tools/rollup-globals.ts @@ -23,7 +23,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', @@ -31,7 +31,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', '@angular/material': 'ng.material', diff --git a/tools/screenshot-test/package.json b/tools/screenshot-test/package.json index 485555b28bc7..d2884537e9f0 100644 --- a/tools/screenshot-test/package.json +++ b/tools/screenshot-test/package.json @@ -16,7 +16,6 @@ "@angular/compiler-cli": "^4.3.0", "@angular/core": "^4.3.0", "@angular/forms": "^4.3.0", - "@angular/http": "^4.3.0", "@angular/material": "angular/material2-builds", "@angular/platform-browser": "^4.3.0", "@angular/platform-browser-dynamic": "^4.3.0", 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 3cff5d19cf5d..3c14c8f310ed 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, ],