angular5 升级到 angular7 步骤

2024-06-29 21:42:23

一般情况下按照官网升级指南 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.fromEventdebounceTime(100)).subscribe(() => myChart.resize());

4. 某些方法名的变化

如 do => tap, catch => catchError, switch => switchAll, finally => finalize, throw => throwError

angular5 升级到 angular7 步骤相关推荐

简单介绍CentOS6升级glibc操作步骤
大家好,本篇文章主要讲的是CentOS6升级glibc操作步骤,感兴趣的小伙伴赶紧来看一看吧,对你有帮助的话记得收藏本篇文章哦!方便下次浏览背景测试环境有一台CentOS 6系统,需要搭建安卓编译 ...
华为手机如何升级鸿蒙系统_华为鸿蒙系统怎么升级？升级鸿蒙系统步骤[多图]...
这次开启华为鸿蒙2.0系统手机开发者beta版公测招募的机型有华为P40 .P40 Pro.Mate 30.Mate 30 Pro. MatePad Pro 设备,支持 OTA 升级.华为鸿蒙2.0系 ...
华为ota鸿蒙升级,华为鸿蒙系统怎么升级？升级鸿蒙系统步骤
这次开启华为鸿蒙2.0系统手机开发者beta版公测招募的机型有华为P40 .P40 Pro.Mate 30.Mate 30 Pro. MatePad Pro 设备,支持 OTA 升级.华为鸿蒙2.0系 ...
p20能用鸿蒙吗,华为P20怎么升级鸿蒙系统 P20升级鸿蒙系统步骤教程
华为鸿蒙系统已经正式上线,有着许多拥有华为不同机型的朋友,都有存在一个疑惑,今天,我们就来解决华为P20怎么升级鸿蒙系统的问题,快和小编一起走进P20升级鸿蒙系统步骤教程学习了解一下吧. 华为P20怎 ...
三星schi779 android版本更新,三星i779系统如何升级【方法步骤】
导语: 现代社会,手机俨然成了我们每个人都必不可缺的一种物品,在这个时代,几乎每个人都拥有一台专属于自己的手机,不管你是学生还是上班族,不管你是老板还是打工仔,手机几乎都是必备的,如今手机不仅只拥有 ...
ThinkPad 使用两种BIOS升级文件进行BIOS升级的具体步骤。
ThinkPad 使用两种BIOS升级文件进行BIOS升级的具体步骤. 一.ThinkPad A/T/R/X/G系列使用BIOS Diskette升级文件进行BIOS升级步骤: 1.在计算机进行BIO ...
2023新绩效：企业绩效管理升级的五步骤
在当今的社会高速发展的过程中,无论是想要生存.想要发展.还是想要壮大的企业,都面临着自身绩效管理的迭代更新.绩效伴随着企业的存在而存在,我们不能弃它而去,也不能妄想用其他的人力资源工具而替代它,而应该 ...
华为nova升级鸿蒙,华为Nova6怎么升级鸿蒙系统 Nova6升级鸿蒙系统步骤教程
华为Nova6这一次并不在第一批次的升级队列之中,暂时是无法升级鸿蒙系统的,但是华为方也发布了Nova6将会在今年的第三季安排鸿蒙系统的升级,那么华为Nova6怎么升级鸿蒙系统呢?抢先走入Nova6升 ...
p30会更新鸿蒙系统吗,华为P30怎么升级鸿蒙系统 P30升级鸿蒙系统步骤教程
就在本周三晚八点,华为正式宣布了鸿蒙系统的公测,许多使用华为手机的小伙伴都表示那么华为P30怎么升级鸿蒙系统呢?就让我们一起走进 P30升级鸿蒙系统步骤教程看看吧. 华为P30怎么升级鸿蒙系统的其实 ...

最新文章

热门文章