@玛酷猫5 年前
Angular今年的发展真是快，去年年底5刚刚发布，年中就发布6，到年底7也来了，大版本的升级也导致它的很多组件也随之升级，慢慢的放弃了对低版本的支持，这对于使用基于Angular的Ionic开发的本人来说就是件很郁闷的事情。之前一直使用Ionic 3开发项目，还是基于Angular5的，年中的时候本地开发环境更新组件没注意，直接把Angular升级到6了，然后可想而知，项目直接跑不起来了。还原package.json后每次更新组件都检查下版本，避免错误升级，很是麻烦。随着Ionic4的测试版本不断的更新，Ionic cli动不动就提示更新Ionic4，稍不留神就傻逼，再加上越来越多的组件默认使用Angular 6，主要是其中RxJS的语法变动很大，导致没法向下兼容5，这也将Ionic升级到4的想法提上日程。毕竟ios和android还在不停的更新版本，每次更新或多或少都会出现兼容性问题，组件导致的兼容性问题主要还是靠组件作者更新，虽然可以自己fork一个分支处理，毕竟费时费力。
去Ionic官网翻了翻迁移指南，官方写的实在是太简单，全文如下：
- Generate a new project using the blank starter (see Starting an App)
- Copy any Angular services from src/providers to src/app/services
- Services should include { providedIn: ‘root’ } in the @Injectable() decorator. For details, please see Angular provider docs.
- Copy the app’s other root level items (pipes, components, etc) keeping in mind that the directory structure changes from src/components to src/app/components, etc.
- Copy global Sass styling from src/app/app.scss to src/global.scss
- Copy the rest of the application, page by page or feature by feature, keeping the following items in mind:
- Emulated Shadow DOM is turned on by default
- Page/component Sass should no longer be wrapped in the page/component tag and should use Angular’s styleUrls option of the @Component decorator
- RxJS has been updated from v5 to v6 (see RxJS Changes)
- Certain lifecycle hooks should be replaced by Angular’s hooks (see Lifecycle Events)
- Markup changes may be required (migration tool available, see Markup Changes)
In many cases, using the Ionic CLI to generate a new object and then copying the code also works very well.
大概意思就是用命令新建一个空的项目，将原来项目各个部分拷贝进来，注意4的路径有所调整。服务的声明有所调整、全局样式文件不一样、RxJS请自己看升级文档、页面生命周期时间沿用Angular。看来不麻烦呀，于是乎我就傻呵呵的按着文档操作一顿后，都不用试跑的，IDE上满屏幕的红色波浪线（各种错误）仿佛在嘲笑。看了看IDE上面提示的各种错误，连最基本的ionic、angular的引用方式都有所变化，我就不信有人能按照这个智障的迁移文档，把项目跑起来。尤其是看到文档最后一句话：“In many cases, using the Ionic CLI to generate a new object and then copying the code also works very well. ”，还信誓旦旦的说大部分情况下按照这个操作项目都能跑起来，我&……￥&*……&#，还是老老实实一个模块一个页面的迁移好了。
经历的大半个月的迁移工作，虽说还没有完全结束，迁移过程中踩的坑可真不少，准备做一个系列来写了。一方面记录下的这些问题，方便以后查看，另一方面也希望帮助其他的人，毕竟目前在国内，相对于React和Vue，Angular还太小众，各种文档和解决方案都很少，遇到问题都要爬google搜索，要不就去啃官方论坛和stackoverflow。
随带一提的是Ionic（Angular）的发展简直是坑神一样的存在，当年AngularJs升级Angular（ionic1到2）的时候，惊呼上当受骗，本以为是个版本升级，能迁移的时候菜发现这明明就是两种不同的东西，没办法相当于重新学了一遍，ionic2/3到4又相当于再重学一边，4为了更标准化web component，修正了以前版本各种不标准的用法和属性，而且可以说不在依赖框架，也就是说以前Ionic和Angular是捆绑在一起的，从4版本开始，也可以使用React和Vue来做开发，更加灵活。并且使用标准化的web component后，以后也不会出现类似1到2、2/3到4这种痛苦的迁移过程了，应该会很平滑的升级，版本迭代的速度应该会更快。