Angular4升级为Angular7进阶指南

前言
光阴似箭,入职现在的公司已经一年多了,
回想刚入职时还是第一次接触到angular
当时angular4出来也没有多久,所以对这门新技术也是报以期待。
一年多内,我们的产品也从我刚来时的v1.03版本迭代到了v2.0。
但在此过程中,我们前端团队一直忙于业务功能的开发,而忽视了“工具”本身的进阶。
导致angular中很多新的功能甚至是很多新的UI组件不能使用。
在年前开发完公司产品的v2.0版本之后,我终于能抽出来一些时间为整个项目做一个升级,
以下为此次升级的一些步骤已经才到的坑,希望能对小伙们有一些帮助。

1. 开始前准备

1.备份你的项目
2.确保你的环境满足一下要求

1
2
$ node -v node >= 8.9.0  
$ npm -v npm >= 5.6.0

3.删除你项目根目录下的 package-lock.json 文件

2. Angular4升级为Angular5

由于整个项目过于庞大,也是为了试试水,所以在此次升级的过程中,我想先升级为5.0来看看。
查阅了一些资料,发现Angular官网是有一篇升级指南
打开升级指南,将初始版本号选择4.0,升级到的版本号选择到5.0。点击Show me how to update!按钮,查看升级步骤。
image.png
在升级步骤中,前面两个小步骤提示按上面的做法做就可以了。如果你的项目不是使用en-us以外的语言环境的应用程序,则直接在项目的根目录执行一下命令:

1
npm install @angular/animations@^5.0.0 @angular/common@^5.0.0 @angular/compiler@^5.0.0 @angular/compiler-cli@^5.0.0 @angular/core@^5.0.0 @angular/forms@^5.0.0 @angular/http@^5.0.0 @angular/platform-browser@^5.0.0 @angular/platform-browser-dynamic@^5.0.0 @angular/platform-server@^5.0.0 @angular/router@^5.0.0 typescript@2.4.2 rxjs@^5.5.2

1
npm install typescript@2.4.2 --save-exact

或者使用淘宝镜像cnpm

升级完之后,如果你的项目中使用了router,会看到使用路由的地方爆一些错,查阅了一下资料,是Angular5中路由的一些改动,由于在后面的版本中也做了相应的调整,所以在这里我就没有管它,而是继续后面的升级。

3. 升级本地的Angular-cli

在这里我是先卸载原先的Angular-cli,然后再安装最新版。

1
2
3
$ npm uninstall -g @angular/cli    // 卸载旧版本cli。
$ npm cache clean // 清除缓存,确保卸载干净
$ npm install -g @angular/cli@latest //安装最新版本的cli

注:如果卸载全局包失败可以在本地目录下手动删除(window10)
C:\Users\HUAWEI\AppData\Roaming\npm\node_modules(一般存在于C盘的用户文件夹下)

安装完毕之后使用指令查看:

1
$ ng -v

4. Angular5到Angular7

升级了本地的Angular-cli之后,就可以对项目进行升级了。
依次执行一下命令

1
2
3
4
5
6
npm install @angular/cli
ng update @angular/cli
ng update @angular/core
ng update
npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

上面依次更新的是angular/cli,angular/core,以及rxjs

5. 项目代码报错调整

升级完毕之后,打开项目文件,许多代码可能会报错,一般都是在你的http方法中。

5.1 Observable和Subject

若是你的代码中有使用到

1
2
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

的地方,则可能会报错,因为新版本的rxjs做了一些改变,你只需要按以下写法就可以

1
import { Observable ,  Subject } from 'rxjs';

5. 2 timeout, map, filter, mergeMap等

同时有用到timeout,map, filter, mergeMap的地方(一般http请求的时候有用到),也需要进行响应调整

1
import { timeout, map, filter, mergeMap } from 'rxjs/operators'

新版本的timeout,map, filter, mergeMaprxjs/operators中调用。
原来的引用方式是:

1
2
3
4
5
6
7
let xhr = this.http
.post(url, data, option)
.timeout(60000)
.toPromise()
.then(res => {
...
})

此时也要修改为

1
2
3
4
5
6
7
let xhr = this.http
.post(url, data, option)
.pipe(timeout(60000))
.toPromise()
.then(res => {
...
})

在使用时需要用pipe()盛放起来。
同理:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
this.router.events
.pipe(
filter(event => event instanceof NavigationEnd),
map(() => this.activatedRoute),
map(route => {
while (route['firstChild']) route = route['firstChild'];
return route;
}),
filter(route => route['outlet'] === 'primary'),
mergeMap(route => route['data'])
)
.subscribe(event => {
...
})

后语
在将项目成功升级之后,就可以开心的使用NG-ZORRO了(原本使用的UI库为primeng)。在这里安利一波antd,这真的是一个很强大的UI库,现在前端主流的三大框架vue, react, angular,它都有对应的库,如angular中的NG-ZORRO
升级参考:
记NG4 迁移到 NG6 的一次实践

评论