一般情况下按照官网升级指南 update.angular.io 能够完成,但有些细节总是报错,这里记录一下。
一、升级步骤
1. 移除node_modules文件夹、package-lock.json或yarn.lock.
2. 升级angular cli。ng5的cli是没有ng update命令的,必须升级到ng6以上才能执行
npm install -g @angular/cli
npm install @angular/cli
3. 升级cli相关配置。 完成后 .angular-cli.json 会被转换成 angular.json.
ng update @angular/cli
4. 升级 angular 核心模块.
ng update @angular/core
5. 一般情况下,由于angular和rxjs的升级,你安装的其他插件都需要升级版本,你可以选择按需升级,或者干脆直接全部升级 ng update --all。
6. 修改项目内rxjs的语法。可以通过 rxjs-tslint 进行自动修改,也可以自己手动改,或者安装rxjs-compat 兼容当前代码。
npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json
二、rxjs6的变化
1. import 方式改变
import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs'; // 创建方法,类型,调度程序和工具库
import { map, filter, scan } from 'rxjs/operators'; // 操作符
import { webSocket } from 'rxjs/webSocket'; // webSocket
import { ajax } from 'rxjs/ajax'; // ajax
import { TestScheduler } from 'rxjs/testing'; // 测试工具
2. 链式操作变为管道操作
source.pipe(
map(x => x + x),
mergeMap(n => of(n + 1, n + 2).pipe(
filter(x => x % 1 == 0),
scan((acc, x) => acc + x, 0),
)),
catchError(err => of('error found')),
).subscribe(printResult);
3. 使用函数而不是类
fromEvent(window, 'resize').pipe( // 不再使用 Observable.fromEvent
debounceTime(100)
).subscribe(() => myChart.resize());
4. 某些方法名的变化
如 do => tap, catch => catchError, switch => switchAll, finally => finalize, throw => throwError