Angular版本升級注意事項

最近在使用Angular做爲前端框架進行開發時發現各版本存在必定的差別，尤爲是對於依賴架包的引入，網上搜集了一些資料進行整理，主要須要注意如下幾點。具體示例可查看http://www.javashuo.com/article/p-rheabhsv-bp.html

 

一、http的調用，以Angular4.3爲分界點

　　1）、import方式

舊版	新版(>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）、調用示例，pipe的使用方式以及API命名不同

調用方式	舊版	新版(>V4.3)
get	http. get(url, options)       . map( this.extractData)       . catch( this.handleError);	httpClient. get(url, options)      . pipe( map( this.extractData),  catchError( this.handleError));
post	http. post(url, params, options)       . map( this.extractData)       . catch( this.handleError);	httpClient. post(url, params, options)      . pipe( map( this.extractData),  catchError( this.handleError));
put	http. put(url, params, options)       . map( this.extractData)       . catch( this.handleError);	httpClient. put(url, params, options)      . pipe( map( this.extractData),  catchError( this.handleError));
delete	http. delete(url, options)       . map( this.extractData)       . catch( this.handleError);	httpClient. delete(url, options)      . pipe( map( this.extractData),  catchError( this.handleError));
調用示例： httpUtil. put( 'http://localhost/sys/menu/edit' , this.menu)       . subscribe( data  => {          if (data.code  == CodeEnum.SUCCESS) {            this.msg  =  "修改爲功";            setTimeout(()  => {  super. goBack() },  3000);         }  else {            this.msg  =  "修改失敗";         }       },  error  =>  this.errorMessage  = < any>error);

二、rxjs的變換，以rxjs6爲分界點

　　1）、import方式

import類型	舊版	新版(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重命名

舊版	新版(rxjs6)
do()	tap()
catch()	catchError()
switch()	switchAll()
finally()	finalize()
throw()	throwError()
新版(rxjs6)operators所有集中到rxjs/operator下進行管理