docs: migrate examples from @angular/http to @angular/common/http (#28296)
PR Close #28296
This commit is contained in:
parent
4b9eb6185f
commit
a29ce57732
|
@ -28,7 +28,6 @@
|
|||
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
|
||||
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
|
||||
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
|
||||
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
|
||||
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
|
||||
'@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
|
||||
},
|
||||
|
|
|
@ -1,19 +1,16 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { Http } from '@angular/http';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
|
||||
import { Observable } from 'rxjs';
|
||||
import { map } from 'rxjs/operators';
|
||||
|
||||
import { Hero } from './hero.model';
|
||||
import { Hero } from './hero.model';
|
||||
|
||||
@Injectable()
|
||||
export class HeroService {
|
||||
|
||||
constructor(private http: Http) {}
|
||||
constructor(private http: HttpClient) {}
|
||||
|
||||
getHeroes(): Observable<Hero[]> {
|
||||
return this.http.get('api/heroes').pipe(
|
||||
map(resp => resp.json().data as Hero[])
|
||||
);
|
||||
return this.http.get<Hero[]>('api/heroes');
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,10 +2,10 @@
|
|||
/* avoid */
|
||||
|
||||
import { OnInit } from '@angular/core';
|
||||
import { Http, Response } from '@angular/http';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
|
||||
import { Observable } from 'rxjs';
|
||||
import { catchError, finalize, map } from 'rxjs/operators';
|
||||
import { catchError, finalize } from 'rxjs/operators';
|
||||
|
||||
import { Hero } from '../shared/hero.model';
|
||||
|
||||
|
@ -13,11 +13,10 @@ const heroesUrl = 'http://angular.io';
|
|||
|
||||
export class HeroListComponent implements OnInit {
|
||||
heroes: Hero[];
|
||||
constructor(private http: Http) {}
|
||||
constructor(private http: HttpClient) {}
|
||||
getHeroes() {
|
||||
this.heroes = [];
|
||||
this.http.get(heroesUrl).pipe(
|
||||
map((response: Response) => <Hero[]>response.json().data),
|
||||
catchError(this.catchBadResponse),
|
||||
finalize(() => this.hideSpinner())
|
||||
).subscribe((heroes: Hero[]) => this.heroes = heroes);
|
||||
|
|
|
@ -1,18 +1,16 @@
|
|||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Http, Response } from '@angular/http';
|
||||
import { map } from 'rxjs/operators';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
|
||||
import { Hero } from './hero.model';
|
||||
|
||||
@Injectable()
|
||||
// #docregion example
|
||||
export class HeroService {
|
||||
constructor(private http: Http) { }
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
getHeroes() {
|
||||
return this.http.get('api/heroes').pipe(
|
||||
map((response: Response) => <Hero[]>response.json()));
|
||||
return this.http.get<Hero[]>('api/heroes');
|
||||
}
|
||||
}
|
||||
// #enddocregion example
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// #docregion
|
||||
import { Inject } from '@angular/core';
|
||||
import { Http } from '@angular/http';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
|
||||
import { HeroService } from './hero.service';
|
||||
// #docregion example
|
||||
|
@ -9,6 +9,6 @@ import { HeroService } from './hero.service';
|
|||
export class HeroArena {
|
||||
constructor(
|
||||
@Inject(HeroService) private heroService: HeroService,
|
||||
@Inject(Http) private http: Http) {}
|
||||
@Inject(HttpClient) private http: HttpClient) {}
|
||||
}
|
||||
// #enddocregion example
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Http } from '@angular/http';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
|
@ -10,7 +10,7 @@ import { HeroService } from './hero.service';
|
|||
export class HeroArena {
|
||||
constructor(
|
||||
private heroService: HeroService,
|
||||
private http: Http) {}
|
||||
private http: HttpClient) {}
|
||||
// #enddocregion example
|
||||
// test harness
|
||||
getParticipants() {
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { HttpModule } from '@angular/http';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
|
||||
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
@ -44,7 +44,7 @@ import * as s0901 from '../09-01/app/app.module';
|
|||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
HttpModule,
|
||||
HttpClientModule,
|
||||
InMemoryWebApiModule.forRoot(HeroData),
|
||||
|
||||
s0101.AppModule,
|
||||
|
|
|
@ -1,126 +0,0 @@
|
|||
/**
|
||||
* Test the HeroService when implemented with the OLD HttpModule
|
||||
*/
|
||||
import {
|
||||
async, inject, TestBed
|
||||
} from '@angular/core/testing';
|
||||
|
||||
import {
|
||||
MockBackend,
|
||||
MockConnection
|
||||
} from '@angular/http/testing';
|
||||
|
||||
import {
|
||||
HttpModule, Http, XHRBackend, Response, ResponseOptions
|
||||
} from '@angular/http';
|
||||
|
||||
import { of } from 'rxjs';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HttpHeroService } from './http-hero.service';
|
||||
|
||||
const makeHeroData = () => [
|
||||
{ id: 1, name: 'Windstorm' },
|
||||
{ id: 2, name: 'Bombasto' },
|
||||
{ id: 3, name: 'Magneta' },
|
||||
{ id: 4, name: 'Tornado' }
|
||||
] as Hero[];
|
||||
|
||||
//////// Tests /////////////
|
||||
describe('HttpHeroService (using old HttpModule)', () => {
|
||||
let backend: MockBackend;
|
||||
let service: HttpHeroService;
|
||||
|
||||
beforeEach( () => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [ HttpModule ],
|
||||
providers: [
|
||||
HttpHeroService,
|
||||
{ provide: XHRBackend, useClass: MockBackend }
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
it('can instantiate service via DI', () => {
|
||||
service = TestBed.get(HttpHeroService);
|
||||
expect(service instanceof HttpHeroService).toBe(true);
|
||||
});
|
||||
|
||||
it('can instantiate service with "new"', () => {
|
||||
const http = TestBed.get(Http);
|
||||
expect(http).not.toBeNull('http should be provided');
|
||||
let service = new HttpHeroService(http);
|
||||
expect(service instanceof HttpHeroService).toBe(true, 'new service should be ok');
|
||||
});
|
||||
|
||||
it('can provide the mockBackend as XHRBackend', () => {
|
||||
const backend = TestBed.get(XHRBackend);
|
||||
expect(backend).not.toBeNull('backend should be provided');
|
||||
});
|
||||
|
||||
describe('when getHeroes', () => {
|
||||
let fakeHeroes: Hero[];
|
||||
let http: Http;
|
||||
let response: Response;
|
||||
|
||||
beforeEach(() => {
|
||||
|
||||
backend = TestBed.get(XHRBackend);
|
||||
http = TestBed.get(Http);
|
||||
|
||||
service = new HttpHeroService(http);
|
||||
fakeHeroes = makeHeroData();
|
||||
let options = new ResponseOptions({status: 200, body: {data: fakeHeroes}});
|
||||
response = new Response(options);
|
||||
});
|
||||
|
||||
it('should have expected fake heroes (then)', () => {
|
||||
backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
|
||||
|
||||
service.getHeroes().toPromise()
|
||||
// .then(() => Promise.reject('deliberate'))
|
||||
.then(heroes => {
|
||||
expect(heroes.length).toBe(fakeHeroes.length,
|
||||
'should have expected no. of heroes');
|
||||
})
|
||||
.catch(fail);
|
||||
});
|
||||
|
||||
it('should have expected fake heroes (Observable tap)', () => {
|
||||
backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
|
||||
|
||||
service.getHeroes().subscribe(
|
||||
heroes => {
|
||||
expect(heroes.length).toBe(fakeHeroes.length,
|
||||
'should have expected no. of heroes');
|
||||
},
|
||||
fail
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
it('should be OK returning no heroes', () => {
|
||||
let resp = new Response(new ResponseOptions({status: 200, body: {data: []}}));
|
||||
backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
|
||||
|
||||
service.getHeroes().subscribe(
|
||||
heroes => {
|
||||
expect(heroes.length).toBe(0, 'should have no heroes');
|
||||
},
|
||||
fail
|
||||
);
|
||||
});
|
||||
|
||||
it('should treat 404 as an Observable error', () => {
|
||||
let resp = new Response(new ResponseOptions({status: 404}));
|
||||
backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
|
||||
|
||||
service.getHeroes().subscribe(
|
||||
heroes => fail('should not respond with heroes'),
|
||||
err => {
|
||||
expect(err).toMatch(/Bad response status/, 'should catch bad response status code');
|
||||
return of(null); // failure is the expected test result
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
|
@ -1,69 +0,0 @@
|
|||
// The OLD Http module. See HeroService for use of the current HttpClient
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Http, Response } from '@angular/http';
|
||||
import { Headers, RequestOptions } from '@angular/http';
|
||||
import { Hero } from './hero';
|
||||
|
||||
import { Observable } from 'rxjs';
|
||||
import { throwError } from 'rxjs';
|
||||
import { catchError, map } from 'rxjs/operators';
|
||||
|
||||
@Injectable()
|
||||
export class HttpHeroService {
|
||||
private _heroesUrl = 'app/heroes'; // URL to web api
|
||||
|
||||
constructor (private http: Http) {}
|
||||
|
||||
getHeroes (): Observable<Hero[]> {
|
||||
return this.http.get(this._heroesUrl).pipe(
|
||||
map(this.extractData),
|
||||
// tap(data => console.log(data)), // eyeball results in the console
|
||||
catchError(this.handleError)
|
||||
);
|
||||
}
|
||||
|
||||
getHero(id: number | string) {
|
||||
return this.http.get('app/heroes/?id=${id}').pipe(
|
||||
map((r: Response) => r.json().data as Hero[])
|
||||
);
|
||||
}
|
||||
|
||||
addHero (name: string): Observable<Hero> {
|
||||
let body = JSON.stringify({ name });
|
||||
let headers = new Headers({ 'Content-Type': 'application/json' });
|
||||
let options = new RequestOptions({ headers: headers });
|
||||
|
||||
return this.http.post(this._heroesUrl, body, options).pipe(
|
||||
map(this.extractData),
|
||||
catchError(this.handleError)
|
||||
);
|
||||
}
|
||||
|
||||
updateHero (hero: Hero): Observable<Hero> {
|
||||
let body = JSON.stringify(hero);
|
||||
let headers = new Headers({ 'Content-Type': 'application/json' });
|
||||
let options = new RequestOptions({ headers: headers });
|
||||
|
||||
return this.http.put(this._heroesUrl, body, options).pipe(
|
||||
map(this.extractData),
|
||||
catchError(this.handleError)
|
||||
);
|
||||
}
|
||||
|
||||
private extractData(res: Response) {
|
||||
if (res.status < 200 || res.status >= 300) {
|
||||
throw new Error('Bad response status: ' + res.status);
|
||||
}
|
||||
let body = res.json();
|
||||
return body.data || { };
|
||||
}
|
||||
|
||||
private handleError (error: any) {
|
||||
// In a real world app, we might send the error to remote logging infrastructure
|
||||
let errMsg = error.message || 'Server error';
|
||||
console.error(errMsg); // log to console instead
|
||||
return throwError(errMsg);
|
||||
}
|
||||
}
|
|
@ -41,7 +41,6 @@
|
|||
'app/hero/hero-detail.component.spec',
|
||||
'app/hero/hero-list.component.spec',
|
||||
'app/model/hero.service.spec',
|
||||
'app/model/http-hero.service.spec',
|
||||
'app/shared/highlight.directive.spec',
|
||||
'app/shared/title-case.pipe.spec',
|
||||
'app/twain/twain.component.spec',
|
||||
|
|
|
@ -17,7 +17,6 @@ import './app/hero/hero-detail.component.no-testbed.spec.ts';
|
|||
import './app/hero/hero-detail.component.spec.ts';
|
||||
import './app/hero/hero-list.component.spec.ts';
|
||||
import './app/model/hero.service.spec.ts';
|
||||
import './app/model/http-hero.service.spec.ts';
|
||||
import './app/model/testing/http-client.spec.ts';
|
||||
import './app/shared/highlight.directive.spec.ts';
|
||||
import './app/shared/title-case.pipe.spec.ts';
|
||||
|
|
|
@ -15,10 +15,10 @@
|
|||
// angular bundles
|
||||
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
|
||||
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
|
||||
'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
|
||||
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
|
||||
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
|
||||
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
|
||||
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
|
||||
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
|
||||
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
|
||||
// #docregion upgrade-static-umd
|
||||
|
|
|
@ -6,9 +6,9 @@ import { BrowserModule } from '@angular/platform-browser';
|
|||
// #docregion upgrademodule
|
||||
import { UpgradeModule } from '@angular/upgrade/static';
|
||||
// #enddocregion upgrademodule
|
||||
// #docregion httpmodule
|
||||
import { HttpModule } from '@angular/http';
|
||||
// #enddocregion httpmodule
|
||||
// #docregion httpclientmodule
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
// #enddocregion httpclientmodule
|
||||
// #docregion phonelist
|
||||
import { FormsModule } from '@angular/forms';
|
||||
// #enddocregion phonelist
|
||||
|
@ -28,7 +28,7 @@ import { routeParamsProvider } from './ajs-upgraded-providers';
|
|||
import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
|
||||
// #enddocregion phonedetail
|
||||
|
||||
// #docregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
|
||||
// #docregion bare, upgrademodule, httpclientmodule, phone, phonelist, phonedetail, checkmarkpipe
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
@ -36,12 +36,12 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
|
|||
// #enddocregion bare
|
||||
UpgradeModule,
|
||||
// #enddocregion upgrademodule
|
||||
HttpModule,
|
||||
// #enddocregion httpmodule, phone
|
||||
HttpClientModule,
|
||||
// #enddocregion httpclientmodule, phone
|
||||
FormsModule,
|
||||
// #docregion bare, upgrademodule, httpmodule, phone
|
||||
// #docregion bare, upgrademodule, httpclientmodule, phone
|
||||
],
|
||||
// #enddocregion bare, upgrademodule, httpmodule, phone
|
||||
// #enddocregion bare, upgrademodule, httpclientmodule, phone
|
||||
declarations: [
|
||||
PhoneListComponent,
|
||||
// #enddocregion phonelist
|
||||
|
@ -63,7 +63,7 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
|
|||
// #docregion phone
|
||||
]
|
||||
// #enddocregion routeparams
|
||||
// #docregion bare, upgrademodule, httpmodule, phonelist
|
||||
// #docregion bare, upgrademodule, httpclientmodule, phonelist
|
||||
})
|
||||
export class AppModule {
|
||||
// #enddocregion bare
|
||||
|
@ -73,4 +73,4 @@ export class AppModule {
|
|||
}
|
||||
// #docregion bare
|
||||
}
|
||||
// #enddocregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
|
||||
// #enddocregion bare, upgrademodule, httpclientmodule, phone, phonelist, phonedetail, checkmarkpipe
|
||||
|
|
|
@ -1,12 +1,6 @@
|
|||
// #docregion
|
||||
import { inject, TestBed } from '@angular/core/testing';
|
||||
import {
|
||||
Http,
|
||||
BaseRequestOptions,
|
||||
ResponseOptions,
|
||||
Response
|
||||
} from '@angular/http';
|
||||
import { MockBackend, MockConnection } from '@angular/http/testing';
|
||||
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
|
||||
import { Phone, PhoneData } from './phone.service';
|
||||
|
||||
describe('Phone', function() {
|
||||
|
@ -16,35 +10,34 @@ describe('Phone', function() {
|
|||
{name: 'Phone Y', snippet: '', images: []},
|
||||
{name: 'Phone Z', snippet: '', images: []}
|
||||
];
|
||||
let mockBackend: MockBackend;
|
||||
let httpMock: HttpTestingController;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
HttpClientTestingModule
|
||||
],
|
||||
providers: [
|
||||
Phone,
|
||||
MockBackend,
|
||||
BaseRequestOptions,
|
||||
{ provide: Http,
|
||||
useFactory: (backend: MockBackend, options: BaseRequestOptions) => new Http(backend, options),
|
||||
deps: [MockBackend, BaseRequestOptions]
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
beforeEach(inject([MockBackend, Phone], (_mockBackend_: MockBackend, _phone_: Phone) => {
|
||||
mockBackend = _mockBackend_;
|
||||
beforeEach(inject([HttpTestingController, Phone], (_httpMock_: HttpTestingController, _phone_: Phone) => {
|
||||
httpMock = _httpMock_;
|
||||
phone = _phone_;
|
||||
}));
|
||||
|
||||
it('should fetch the phones data from `/phones/phones.json`', (done: () => void) => {
|
||||
mockBackend.connections.subscribe((conn: MockConnection) => {
|
||||
conn.mockRespond(new Response(new ResponseOptions({body: JSON.stringify(phonesData)})));
|
||||
});
|
||||
afterEach(() => {
|
||||
httpMock.verify();
|
||||
});
|
||||
|
||||
it('should fetch the phones data from `/phones/phones.json`', () => {
|
||||
phone.query().subscribe(result => {
|
||||
expect(result).toEqual(phonesData);
|
||||
done();
|
||||
});
|
||||
const req = httpMock.expectOne(`/phones/phones.json`);
|
||||
req.flush(phonesData);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Http, Response } from '@angular/http';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
import { map } from 'rxjs/operators';
|
||||
|
||||
// #docregion downgrade-injectable
|
||||
declare var angular: angular.IAngularStatic;
|
||||
|
@ -22,16 +21,12 @@ export interface PhoneData {
|
|||
@Injectable()
|
||||
export class Phone {
|
||||
// #enddocregion classdef, downgrade-injectable
|
||||
constructor(private http: Http) { }
|
||||
constructor(private http: HttpClient) { }
|
||||
query(): Observable<PhoneData[]> {
|
||||
return this.http.get(`phones/phones.json`).pipe(
|
||||
map((res: Response) => res.json())
|
||||
);
|
||||
return this.http.get<PhoneData[]>(`phones/phones.json`);
|
||||
}
|
||||
get(id: string): Observable<PhoneData> {
|
||||
return this.http.get(`phones/${id}.json`).pipe(
|
||||
map((res: Response) => res.json())
|
||||
);
|
||||
return this.http.get<PhoneData>(`phones/${id}.json`);
|
||||
}
|
||||
// #docregion classdef, downgrade-injectable
|
||||
}
|
||||
|
|
|
@ -41,7 +41,6 @@ System.config({
|
|||
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
|
||||
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
|
||||
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
|
||||
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
|
||||
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
|
||||
'@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
|
||||
},
|
||||
|
|
|
@ -48,7 +48,6 @@ System.config({
|
|||
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
|
||||
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
|
||||
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
|
||||
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
|
||||
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
|
||||
'@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
|
||||
},
|
||||
|
|
|
@ -16,10 +16,10 @@
|
|||
// angular bundles
|
||||
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
|
||||
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
|
||||
'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
|
||||
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
|
||||
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
|
||||
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
|
||||
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
|
||||
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
|
||||
'@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
|
||||
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpModule } from '@angular/http';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
|
@ -15,7 +15,7 @@ import { PhoneListComponent } from './phone-list/phone-list.component';
|
|||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule,
|
||||
HttpModule,
|
||||
HttpClientModule,
|
||||
AppRoutingModule
|
||||
],
|
||||
declarations: [
|
||||
|
|
|
@ -1,11 +1,5 @@
|
|||
import { inject, TestBed } from '@angular/core/testing';
|
||||
import {
|
||||
Http,
|
||||
BaseRequestOptions,
|
||||
ResponseOptions,
|
||||
Response
|
||||
} from '@angular/http';
|
||||
import { MockBackend, MockConnection } from '@angular/http/testing';
|
||||
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
|
||||
import { Phone, PhoneData } from './phone.service';
|
||||
|
||||
describe('Phone', function() {
|
||||
|
@ -15,35 +9,26 @@ describe('Phone', function() {
|
|||
{name: 'Phone Y', snippet: '', images: []},
|
||||
{name: 'Phone Z', snippet: '', images: []}
|
||||
];
|
||||
let mockBackend: MockBackend;
|
||||
let mockHttp: HttpTestingController;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
providers: [
|
||||
Phone,
|
||||
MockBackend,
|
||||
BaseRequestOptions,
|
||||
{ provide: Http,
|
||||
useFactory: (backend: MockBackend, options: BaseRequestOptions) => new Http(backend, options),
|
||||
deps: [MockBackend, BaseRequestOptions]
|
||||
}
|
||||
]
|
||||
imports: [HttpClientTestingModule],
|
||||
providers: [Phone]
|
||||
});
|
||||
});
|
||||
|
||||
beforeEach(inject([MockBackend, Phone], (_mockBackend_: MockBackend, _phone_: Phone) => {
|
||||
mockBackend = _mockBackend_;
|
||||
beforeEach(inject([HttpTestingController, Phone], (_mockHttp_: HttpTestingController, _phone_: Phone) => {
|
||||
mockHttp = _mockHttp_;
|
||||
phone = _phone_;
|
||||
}));
|
||||
|
||||
it('should fetch the phones data from `/phones/phones.json`', (done: () => void) => {
|
||||
mockBackend.connections.subscribe((conn: MockConnection) => {
|
||||
conn.mockRespond(new Response(new ResponseOptions({body: JSON.stringify(phonesData)})));
|
||||
});
|
||||
it('should fetch the phones data from `/phones/phones.json`', () => {
|
||||
phone.query().subscribe(result => {
|
||||
expect(result).toEqual(phonesData);
|
||||
done();
|
||||
});
|
||||
const req = mockHttp.expectOne(`/phones/phones.json`);
|
||||
req.flush(phonesData);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Http, Response } from '@angular/http';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
import { map } from 'rxjs/operators';
|
||||
|
||||
export interface PhoneData {
|
||||
name: string;
|
||||
|
@ -12,15 +11,11 @@ export interface PhoneData {
|
|||
|
||||
@Injectable()
|
||||
export class Phone {
|
||||
constructor(private http: Http) { }
|
||||
constructor(private http: HttpClient) { }
|
||||
query(): Observable<PhoneData[]> {
|
||||
return this.http.get(`phones/phones.json`).pipe(
|
||||
map((res: Response) => res.json())
|
||||
);
|
||||
return this.http.get<PhoneData[]>(`phones/phones.json`);
|
||||
}
|
||||
get(id: string): Observable<PhoneData> {
|
||||
return this.http.get(`phones/${id}.json`).pipe(
|
||||
map((res: Response) => res.json())
|
||||
);
|
||||
return this.http.get<PhoneData>(`phones/${id}.json`);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -44,10 +44,10 @@ System.config({
|
|||
map: {
|
||||
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
|
||||
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
|
||||
'@angular/common/http/testing': 'npm:@angular/common/bundles/common-http-testing.umd.js',
|
||||
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
|
||||
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
|
||||
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
|
||||
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
|
||||
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
|
||||
'@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
|
||||
},
|
||||
|
|
|
@ -38,6 +38,10 @@ module.exports = function(config) {
|
|||
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
|
||||
{ pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
|
||||
|
||||
// tslib (TS helper fns such as `__extends`)
|
||||
{ pattern: 'node_modules/tslib/**/*.js', included: false, watched: false },
|
||||
{ pattern: 'node_modules/tslib/**/*.js.map', included: false, watched: false },
|
||||
|
||||
// Paths loaded via module imports:
|
||||
// Angular itself
|
||||
{ pattern: 'node_modules/@angular/**/*.js', included: false, watched: false },
|
||||
|
|
|
@ -16,10 +16,10 @@
|
|||
// angular bundles
|
||||
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
|
||||
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
|
||||
'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
|
||||
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
|
||||
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
|
||||
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
|
||||
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
|
||||
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
|
||||
'@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
|
||||
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
|
||||
|
|
|
@ -67,7 +67,6 @@ Package name | Description
|
|||
**@angular/compiler** | Angular's template compiler. It understands templates and can convert them to code that makes the application run and render. Typically you don’t interact with the compiler directly; rather, you use it indirectly via `platform-browser-dynamic` when JIT compiling in the browser. For more information, see the [Ahead-of-time Compilation guide](guide/aot-compiler).
|
||||
[**@angular/core**](api/core) | Critical runtime parts of the framework that are needed by every application. Includes all metadata decorators, `Component`, `Directive`, dependency injection, and the component lifecycle hooks.
|
||||
[**@angular/forms**](api/forms) | Support for both [template-driven](guide/forms) and [reactive forms](guide/reactive-forms). For information about choosing the best forms approach for your app, see [Introduction to forms](guide/forms-overview).
|
||||
[**@angular/http**](api/http) | Angular's legacy HTTP client, which was deprecated in version 5.0 in favor of [@angular/common/http](api/common/http).
|
||||
[**@angular/<br />platform‑browser**](api/platform-browser) | Everything DOM and browser related, especially the pieces that help render into the DOM. This package also includes the `bootstrapModuleFactory()` method for bootstrapping applications for production builds that pre-compile with [AOT](guide/aot-compiler).
|
||||
[**@angular/<br />platform‑browser‑dynamic**](api/platform-browser-dynamic) | Includes [providers](api/core/Provider) and methods to compile and run the app on the client using the [JIT compiler](guide/aot-compiler).
|
||||
[**@angular/router**](api/router) | The router module navigates among your app pages when the browser URL changes. For more information, see [Routing and Navigation](guide/router).
|
||||
|
|
|
@ -470,13 +470,6 @@ While the _code sample_ accompanying this guide demonstrates `HttpClientTestingM
|
|||
this page defers to the [Http guide](guide/http#testing-http-requests),
|
||||
which covers testing with the `HttpClientTestingModule` in detail.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
This guide's sample code also demonstrates testing of the _legacy_ `HttpModule`
|
||||
in `app/model/http-hero.service.spec.ts`.
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## Component Test Basics
|
||||
|
||||
|
|
|
@ -1324,11 +1324,11 @@ ngResource and you're using it for two things:
|
|||
You can replace this implementation with an Angular service class, while
|
||||
keeping the controllers in AngularJS land.
|
||||
|
||||
In the new version, you import the Angular HTTP module and call its `Http` service instead of `ngResource`.
|
||||
In the new version, you import the Angular HTTP module and call its `HttpClient` service instead of `ngResource`.
|
||||
|
||||
Re-open the `app.module.ts` file, import and add `HttpModule` to the `imports` array of the `AppModule`:
|
||||
Re-open the `app.module.ts` file, import and add `HttpClientModule` to the `imports` array of the `AppModule`:
|
||||
|
||||
<code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="httpmodule" header="app.module.ts">
|
||||
<code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="httpclientmodule" header="app.module.ts">
|
||||
</code-example>
|
||||
|
||||
Now you're ready to upgrade the Phone service itself. Replace the ngResource-based
|
||||
|
@ -1343,7 +1343,7 @@ by the [Dependency Injection Guide](guide/dependency-injection),
|
|||
this is a marker decorator you need to use for classes that have no other
|
||||
Angular decorators but still need to have their dependencies injected.
|
||||
|
||||
In its constructor the class expects to get the `Http` service. It will
|
||||
In its constructor the class expects to get the `HttpClient` service. It will
|
||||
be injected to it and it is stored as a private field. The service is then
|
||||
used in the two instance methods, one of which loads the list of all phones,
|
||||
and the other loads the details of a specified phone:
|
||||
|
|
|
@ -8,7 +8,6 @@
|
|||
"@angular/compiler",
|
||||
"@angular/core",
|
||||
"@angular/forms",
|
||||
"@angular/http",
|
||||
"@angular/platform-browser",
|
||||
"@angular/platform-browser-dynamic",
|
||||
"@angular/router",
|
||||
|
|
|
@ -17,11 +17,10 @@
|
|||
"@angular/compiler": "^7.0.0",
|
||||
"@angular/core": "^7.0.0",
|
||||
"@angular/forms": "^7.0.0",
|
||||
"@angular/http": "^7.0.0",
|
||||
"@angular/platform-browser": "^7.0.0",
|
||||
"@angular/platform-browser-dynamic": "^7.0.0",
|
||||
"@angular/router": "^7.0.0",
|
||||
"angular-in-memory-web-api": "^0.6.0",
|
||||
"angular-in-memory-web-api": "^0.8.0",
|
||||
"core-js": "^2.5.4",
|
||||
"rxjs": "^6.3.0",
|
||||
"web-animations-js": "^2.3.1",
|
||||
|
|
|
@ -20,11 +20,10 @@
|
|||
"@angular/compiler": "^7.0.0",
|
||||
"@angular/core": "^7.0.0",
|
||||
"@angular/forms": "^7.0.0",
|
||||
"@angular/http": "^7.0.0",
|
||||
"@angular/platform-browser": "^7.0.0",
|
||||
"@angular/platform-browser-dynamic": "^7.0.0",
|
||||
"@angular/router": "^7.0.0",
|
||||
"angular-in-memory-web-api": "^0.6.0",
|
||||
"angular-in-memory-web-api": "^0.8.0",
|
||||
"core-js": "^2.5.4",
|
||||
"rxjs": "^6.3.0",
|
||||
"web-animations-js": "^2.3.1",
|
||||
|
|
|
@ -17,12 +17,11 @@
|
|||
"@angular/compiler": "^7.0.0",
|
||||
"@angular/core": "^7.0.0",
|
||||
"@angular/forms": "^7.0.0",
|
||||
"@angular/http": "^7.0.0",
|
||||
"@angular/platform-browser": "^7.0.0",
|
||||
"@angular/platform-browser-dynamic": "^7.0.0",
|
||||
"@angular/router": "^7.0.0",
|
||||
"@angular/service-worker": "^7.0.0",
|
||||
"angular-in-memory-web-api": "^0.6.0",
|
||||
"angular-in-memory-web-api": "^0.8.0",
|
||||
"core-js": "^2.5.4",
|
||||
"rxjs": "^6.3.0",
|
||||
"web-animations-js": "^2.3.1",
|
||||
|
|
|
@ -23,7 +23,6 @@
|
|||
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
|
||||
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
|
||||
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
|
||||
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
|
||||
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
|
||||
'@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
|
||||
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
|
||||
|
|
|
@ -54,7 +54,6 @@ can be found in the LICENSE file at http://angular.io/license
|
|||
'@angular/platform-browser': 'ng:platform-browser-builds/master/bundles/platform-browser.umd.js',
|
||||
'@angular/platform-browser/animations': 'ng:animations-builds/master/bundles/platform-browser-animations.umd.js',
|
||||
'@angular/platform-browser-dynamic': 'ng:platform-browser-dynamic-builds/master/bundles/platform-browser-dynamic.umd.js',
|
||||
'@angular/http': 'ng:http-builds/master/bundles/http.umd.js',
|
||||
'@angular/router': 'ng:router-builds/master/bundles/router.umd.js',
|
||||
'@angular/router/upgrade': 'ng:router-builds/master/bundles/router-upgrade.umd.js',
|
||||
'@angular/forms': 'ng:forms-builds/master/bundles/forms.umd.js',
|
||||
|
@ -68,7 +67,6 @@ can be found in the LICENSE file at http://angular.io/license
|
|||
'@angular/compiler/testing': 'ng:compiler-builds/master/bundles/compiler-testing.umd.js',
|
||||
'@angular/platform-browser/testing': 'ng:platform-browser-builds/master/bundles/platform-browser-testing.umd.js',
|
||||
'@angular/platform-browser-dynamic/testing': 'ng:platform-browser-dynamic-builds/master/bundles/platform-browser-dynamic-testing.umd.js',
|
||||
'@angular/http/testing': 'ng:http-builds/master/bundles/http-testing.umd.js',
|
||||
'@angular/router/testing': 'ng:router-builds/master/bundles/router-testing.umd.js',
|
||||
'@angular/forms/testing': 'ng:forms-builds/master/bundles/forms-testing.umd.js',
|
||||
|
||||
|
|
|
@ -50,7 +50,6 @@ can be found in the LICENSE file at http://angular.io/license
|
|||
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
|
||||
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
|
||||
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
|
||||
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
|
||||
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
|
||||
'@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
|
||||
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
"@nguniversal/common": "^7.0.0",
|
||||
"@nguniversal/express-engine": "^7.0.0",
|
||||
"@nguniversal/module-map-ngfactory-loader": "^7.0.0",
|
||||
"angular-in-memory-web-api": "^0.6.0",
|
||||
"angular-in-memory-web-api": "^0.8.0",
|
||||
"core-js": "^2.5.4",
|
||||
"rxjs": "^6.3.0",
|
||||
"web-animations-js": "^2.3.1",
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -17,17 +17,10 @@ describe('angular-api-package: computeApiBreadCrumbs processor', () => {
|
|||
const API_DOC_TYPES_TO_RENDER = ['class', 'interface', 'package'];
|
||||
const processor = processorFactory(API_DOC_TYPES_TO_RENDER);
|
||||
|
||||
const httpPackage = { docType: 'package', name: '@angular/http', id: 'http', path: 'http', isPrimaryPackage: true };
|
||||
const httpTestingPackage = { docType: 'package', name: '@angular/http/testing', id: 'http/testing', path: 'http/testing', packageInfo: { primary: httpPackage } };
|
||||
const testRequestClass = { docType: 'class', name: 'TestRequest', path: 'http/testing/test-request', moduleDoc: httpTestingPackage };
|
||||
|
||||
const docs = [
|
||||
{ docType: 'class', name: 'ClassA', path: 'module-1/class-a', moduleDoc: { id: 'moduleOne', path: 'module-1' } },
|
||||
{ docType: 'interface', name: 'InterfaceB', path: 'module-2/interface-b', moduleDoc: { id: 'moduleTwo', path: 'module-2' } },
|
||||
{ docType: 'guide', name: 'Guide One', path: 'guide/guide-1' },
|
||||
httpPackage,
|
||||
httpTestingPackage,
|
||||
testRequestClass
|
||||
];
|
||||
processor.$process(docs);
|
||||
|
||||
|
@ -42,20 +35,5 @@ describe('angular-api-package: computeApiBreadCrumbs processor', () => {
|
|||
{ text: 'InterfaceB', path: 'module-2/interface-b' },
|
||||
]);
|
||||
expect(docs[2].breadCrumbs).toBeUndefined();
|
||||
expect(docs[3].breadCrumbs).toEqual([
|
||||
{ text: 'API', path: '/api' },
|
||||
{ text: '@angular/http', path: 'http' },
|
||||
]);
|
||||
expect(docs[4].breadCrumbs).toEqual([
|
||||
{ text: 'API', path: '/api' },
|
||||
{ text: '@angular/http', path: 'http' },
|
||||
{ text: '@angular/http/testing', path: 'http/testing' },
|
||||
]);
|
||||
expect(docs[5].breadCrumbs).toEqual([
|
||||
{ text: 'API', path: '/api' },
|
||||
{ text: '@angular/http', path: 'http' },
|
||||
{ text: '@angular/http/testing', path: 'http/testing' },
|
||||
{ text: 'TestRequest', path: 'http/testing/test-request' },
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -40,13 +40,11 @@ describe('generateApiListDoc processor', () => {
|
|||
const docs = [
|
||||
{ docType: 'package', id: '@angular/common/index', exports: [], path: 'common' },
|
||||
{ docType: 'package', id: '@angular/core/index', exports: [], path: 'core' },
|
||||
{ docType: 'package', id: '@angular/http/index', exports: [], path: 'http' },
|
||||
];
|
||||
processor.$process(docs);
|
||||
expect(docs[3].data).toEqual([
|
||||
expect(docs[2].data).toEqual([
|
||||
{ name: '@angular/common', title: '@angular/common', items: [], path: 'common' },
|
||||
{ name: '@angular/core', title: '@angular/core', items: [], path: 'core' },
|
||||
{ name: '@angular/http', title: '@angular/http', items: [], path: 'http' },
|
||||
]);
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue