angular5 升级到 angular7 步骤

一般情况下按照官网升级指南 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