Angular version upgrade considerations

Recently found that when used as a front-end framework for developing Angular there are some differences in each version, especially for the introduction of dependent frame package, the Internet to collect some information collation, mainly to note the following points.

 

1, http call to Angular4.3 as a dividing point

　　1), Import mode

Old version	The new (> V4.3)
import { Http } from '@angular/http';	import { HttpClient } from '@angular/common/http';
import { Headers } from '@angular/http';	import { HttpHeaders } from '@angular/common/http';
import { Request } from '@angular/http';	import { HttpRequest } from '@angular/common/http';
import { Response } from '@angular/http';	import { HttpResponse } from '@angular/common/http';
......	......

　　2) call example

Called	Old version	The new (> V4.3)
get	http.get(url).map(response: Response) => { response.json().xxxx进行引用 }	httpClient.get(url).pipe(map(item => item['xxxxxx'])); }
post	headers = new Headers({'Content-type': 'application/json'}); http.post(url, JSON.stringify(body),{headers: headers}).map((response: Response) => { response.json.xxxxx进行引用 })	headers = new HttpHeaders({'Content-type': 'application/json'}); httpClient.post(url)put(url, JSON.stringify(body),{headers: headers}).pipe(map(item => { item['xxxxxx']引用 })); }
put	headers = new Headers({'Content-type': 'application/json'}); http.put(url, JSON.stringify(body),{headers: headers}).map((response: Response) => { response.json.xxxxx进行引用 })	headers = new HttpHeaders({'Content-type': 'application/json'}); httpClient.put(url)put(url, JSON.stringify(body),{headers: headers}).pipe(map(item => { item['xxxxxx']引用 })); }
delete	http.delete(url).map(response: Response) => { response.json().xxxx进行引用 }	httpClient.delete(url).pipe(map(item => item['xxxxxx'])); }
Observable values used to subscribe to: .subscribe (Respose = > {} using the response for reference)

2, rxjs conversion to the demarcation point rxjs6

　　1), Import mode

import type	Old version	The new (rxjs6)
Observable	import { Observable } from 'rxjs/observable';	import { Observable } from 'rxjs';
map	import 'rxjs/add/operator/map';	import { map } from 'rxjs/operators';
fromPromise	import 'rxjs/add/observable/fromPromise';	import { fromPromise } from 'rxjs';

　　2), API rename

Old version	The new (rxjs6)
do()	tap()
catch()	catchError()
switch()	switchAll()
finally()	finalize()
throw()	throwError()
The new (rxjs6) operators all focus to the next rxjs / operator to manage

Specific use too empty to sort out the old version, the new version of http tools.