Angular4升级为Angular7进阶指南

前言

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

1. 开始前准备

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以外的语言环境的应用程序，则直接在项目的根目录执行一下命令：

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 [email protected] rxjs@^5.5.2

npm install [email protected] --save-exact

或者使用淘宝镜像cnpm。

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

3. 升级本地的Angular-cli

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

$ 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盘的用户文件夹下）
安装完毕之后使用指令查看：

$ ng -v

4. Angular5到Angular7

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

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

若是你的代码中有使用到

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

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

import { Observable ,  Subject } from 'rxjs';

5. 2 timeout, map, filter, mergeMap等

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

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

新版本的timeout,map, filter, mergeMap在rxjs/operators中调用。
原来的引用方式是：

let xhr = this.http
.post(url, data, option)
.timeout(60000)
.toPromise()
.then(res => {
  ...
})

此时也要修改为

let xhr = this.http
.post(url, data, option)
.pipe(timeout(60000))
.toPromise()
.then(res => {
  ...
})

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

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 的一次实践