Angular版本升级注意事项

最近在使用Angular作为前端框架进行开发时发现各版本存在一定的差异，尤其是对于依赖架包的引入，网上搜集了一些资料进行整理，主要需要注意以下几点。具体示例可查看https://www.cnblogs.com/54hsh/p/11512818.html

 

1、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);

2、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下进行管理