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