第五: 合并相同业务模块。因为已经开启混合模式,配置好了 Http 请求和路由策略,所以可以考虑将高版本的 Angular 模块合并到开启混合模式的模块中。
......
(7)最终目标
不论准备工作和具体的升级实施方案如何,技术升级改造的最终目标是简单明确的——合并相同业务模块,并将所有仓库的代码升级到高版本 Angular。如下图:
5. 遇到的主要难点
(1)路由及路由组件的升级改造
Angular 官方文档在路由改造这一块考虑不是很周全或参考性不强,其升级改造方式并不是渐进式的。一般来说,大的遗留项目根本无法一次性将所有的路由组件替换完。因此需要考虑 AngularJS Router 和 Angular Router 两种路由的长期共存的可能性,并在改造中逐步用 Angular Router 去替换 AngularJS Router 。而这方面相关的解决方案,官方的升级文档中并没有提供,需要自己摸索或搜寻。
Tips: 如果考虑在混合应用中只用 AngularJS Router 路由,也是可行的。其中一种解决方案是将所有的 Angular 路由组件进行降级使用,或者如果 AngularJS Router 用的是 ui-router, ui-router 官方也提供了一套对混合应用进行支持的方案 angular-hybrid 。但如果考虑到升级改造本身就是要替换掉 AngularJS Router 路由,那么首选混合路由相对较好。
(2)升级改造中的 breaking changes
对所有第三方库的升级,即使是次版本的升级,有时也会有一些 breaking changes(比如 Angular 1.4 到 1.5),这是升级时所必须注意的。而对相应的 breaking changes 则必须结合实际项目作出评估,判断出影响范围有哪些或者是否很大。如果影响范围很大或修改工作量太大,就需要考虑是否有升级的必要性。
另外,在升级过程中还遇到了依赖升级的情况。在将 Angular 1.4 升级到 1.5 后,在使用 1.5 新增的 component 组件特性时,发现其作为路由组件在项目中使用的 ui-router 0.4.x 中不支持这一特性,而它是从 1.0 及其以后开始支持的。这种大版本的变更必然带来 breaking changes ,在结合了官方的 UI-Router 1.0 Migration 以及项目中使用情况,梳理出 breaking changes 带来的影响点后,判定为影响相对较小可以接受,因此也连带着将 ui-router 升级到了 1.0 。
(3)官方 Angular 升级方案本身的限制
无法对 AngularJS 的过滤器 filter 以及属性指令 attribute directive 进行升级在 Angular 中使用,同时 Angular 的管道 Pipe 以及属性指令 attribute directive 也无法降级在 AngularJS 中使用。
这个主要会带来两个问题:
第一: 无法复用,一定时间内可能会同时存在类似逻辑的两份代码。
第二: 有时要升级一个 AngularJS 组件,会发现里面大量使用了过滤器 filter 以及自定义的属性指令 attribute directive ,升级一个组件的工作量会比预想中的大得多(不能很顺滑的升级组件)。
(4)第三方 UI 组件库的升级改造
遗留项目中主要使用的 UI 组件库是 angular-ui-bootstrap ,一个纯 AngularJS 的组件库。
首先,由于其引入的版本比较低只有 0.14.x ,其组件指令 component directive 实现还是用了 replace: true 等这些无法进行升级的特性,所以无法直接通过升级在 Angular 中使用。
其次,在遗留项目中不仅大量使用 angular-ui-bootstrap 的组件指令 component directive ,也使用了很多它的属性指令 attribute directive ,这也导致了就算将 angular-ui-bootstrap 本身进行升级(至少升到 2.0,存在大量 breaking changes),以使得组件指令 component directive 可以通过暂时升级的方式在 Angular 中使用,但属性指令 attribute directive 无法使用的问题仍旧无法解决。
也因此,最终放弃了升级 angular-ui-bootstrap 本身,而是考虑直接用一个高版本的 Angualr 的 UI 组件库进行替代,只要保证样式和基本交互能够基本一致即可。
6. 小结
综上,主要介绍了遗留项目的基本情况、项目中的限制与应当遵循的升级改造原则、大致的升级改造方向以及遇到的主要难点。后续系列文章准备将进一步讨论升级方案中一些步骤具体如何实践以及踩过的坑。