前段时间将所负责的 Angular2 项目升级到了 Angular5 版本，这两天又进行了升级至 Angular6 的尝试。总的来说，两次升级过程比较类似，也不算复杂。

0. 项目特点

该项目有如下特点：

• 历史悠久，项目庞大，源码文件数量近千
• 业务代码为主，极少应用 Angular 高级特性(升级简单)
• 采用 pug 编写 html 结构
• 采用 Less 编写 css 样式
• 采用 Express 和 http-proxy 实现 server 及后端 API 的代理
• 采用 compodoc 生成文档
• 采用自开发的 @lzwme/simple-mock 实现 API mock
• 采用 Fis3 编译，项目源码中深度使用了 fis3 的一些文件引用特性
• 采用 webpack 和 karma、jasmine 配置和执行单元测试
• 采用 styleLint、tsLint、husky 和 prettier 执行编码风格校验及格式化处理

项目升级后也没有使用 @angular/cli，继续采用 fis3 作为编译工具。这一是因为许多历史悠久的代码风格无法通过 tslint 校验，ng build 根本无法执行通过；二是因为项目的部分代码编写和构建与发布流程使用了一些 fis3 的特性，改造成本较大。而且经过比对，@angular/cli 的编译过程并没有比 fis3 好很多。

下面简要介绍一下升级的过程和方法。

1. 更新 package.json 的依赖

将 Angular 依赖库改为 ^6.1.0 版本，并且注意项目依赖的 Angular 组件库的兼容版本更新。如我们的项目依赖有如下变更：

• @ngx-translate/core 需要更新至 ^10.0.2 版本；
• angular-tree-component 需要更新至 7.x 版本；
• @ngrx/store 需要更新至 ^6.1.0 版本；

注意：一些组件库的 API 也会有不兼容更新，相关代码逻辑应作改进(可在升级完成后根据文档和错误提示去调试和修改)。

升级后的项目依赖参考：

2. 添加 rxjs-compat 依赖

为了兼容 rxjs 5 的用法，必须引入 rxjs-compat。

添加依赖：

然后在项目入口文件 main.ts 中引入它：

注意，后续的开发应有意识地以 rxjs6 的新写法去编码。
当然，如决定改掉 rxjs5 的旧写法，可以移除对 rxjs-compat 的引入，参照浏览器错误提示去一一修改即可。

3. 按官方指引和项目实际情况选择性操作

打开 Angular 官方升级指引网站 https://update.angular.io 按提示和项目实际情况操作。

实际上项目没有太多高级的用法，需要修改的内容并不多。大致有以下几点：

• 如有用到 extends OnInit，应该为 implements OnInit 方式

• 模板中如有用到 <template> 标签，将它改为 <ng -template>。全局查找和替换即可。

• HttpModule 和 Http 应分别改用 HttpClientModule 和 HttpClient。HttpClient 支持拦截器，这可以在 http 请求过程中实现注入，实现更自由的逻辑，如角色权限验证等。项目中的 http 请求已经基于 Http 模块进行了封装，所以这一步可以忽略。但应考虑全局改进 http 封装，或者在后续的开发中采用 HttpClient。

• 全局安装 rxjs-tslint，执行源码级的升级，主要是修改 rxjs@6 废弃的用法。这个操作会修改很多文件。

以上操作完成后，尝试启用项目构建编译，如无报错即已成功升级。