docs: migrate examples from @angular/http to @angular/common/http (#28296)

PR Close #28296
This commit is contained in:
Adam Plumer 2018-11-09 20:23:46 -06:00 committed by Kara Erickson
parent 4b9eb6185f
commit a29ce57732
38 changed files with 2432 additions and 2758 deletions

View File

@ -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',
},

View File

@ -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');
}
}

View File

@ -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);

View File

@ -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

View File

@ -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

View File

@ -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() {

View File

@ -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,

View File

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

View File

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

View File

@ -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',

View File

@ -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';

View File

@ -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

View File

@ -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

View File

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

View File

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

View File

@ -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',
},

View File

@ -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',
},

View File

@ -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',

View File

@ -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: [

View File

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

View File

@ -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`);
}
}

View File

@ -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',
},

View File

@ -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 },

View File

@ -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',

View File

@ -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 dont 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&#8209;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&#8209;browser&#8209;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).

View File

@ -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

View File

@ -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:

View File

@ -8,7 +8,6 @@
"@angular/compiler",
"@angular/core",
"@angular/forms",
"@angular/http",
"@angular/platform-browser",
"@angular/platform-browser-dynamic",
"@angular/router",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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',

View File

@ -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',

View File

@ -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',

View File

@ -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

View File

@ -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' },
]);
});
});

View File

@ -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' },
]);
});