本文同时发布到 我的个人博客站点
Ionic 3 正式发布已经近一个月了，很多朋友惊呼 Ionic 2 还没上手 Ionic 3 又发布了，会不会又要花很大精力去学习等。认真研究了下，我发现 Ionic 2 到 Ionic 3 的升级只是一些类库的升级，并不需要像 Ionic 1 到 Ionic 2 那样完全重写代码。下面就花点时间给大家介绍下 Ionic 3 的特性以及如何从 Ionic 2 升级到 Ionic 3。
Ionic 3 的新特性
关于 Ionic 3 的详细说明可以参考官方博客
#0 Angular 4
Angular 4 是在3月底发布的。Angular 4 这次更新大致如下：改进 AOT 编译器，分离 animations 包，缩小生成后的代码量，改进 *ngIf 和 *ngFor 等。详细介绍请参这篇文章。
#1 兼容 Typescript 2.1 和 2.2
这个其实就是 Angular 4 带来的新特性。
#2 IonicPage 装饰器
IonicPage 装饰器将 URL 注册到特定页面。Ionic 使用了一套叫做 deeplink 的 URL 系统，当使用 NavController push 到新页面时，URL 随之更新。注意这和 URL routing 是不同的。关于 IonicPage 的详细介绍请参考官方文档。
#3 Lazy Loading 懒加载
Lazy Loading 可以在初始化时只加载一些必要的代码，非必要的代码分离出来在需要加载的时候再加载之，理论上能让应用加快一定的启动速度。
升级到 Ionic 3
#0 修改 npm 依赖包
从 Ionic 2 开始使用了 npm 去管理包，所以我们在 package.json 文件的 dependencies 节点中修改依赖项。
- 修改
ionic-angular到当前最新的3.1.1版本。 -
ionic-angular依赖 Angular 4.0.2 版本，将所有@angular/*开头的包修改为4.0.2版本，增加@angular/animations包。 - 删除
ionic-native包，添加所需的@ionic-native/*包，最新版本为3.6.1 - 将
rxjs修改到依赖的5.1.1版本。 - 将
zone.js修改到依赖的0.8.5版本。
修改完成后，执行 npm install 命令，若 npm 仍提示有依赖问题，参考错误提示逐一解决就好。
#1 修改代码以支持 Ionic Native 3.x
参考 Ionic Native 文档 修改 StatusBar 和 SplashScreen 的引用方式。
#2 修改代码以支持 Lazy Loading (非必需)
- 在每个 Page 对应的目录下新建一个
[pagename].module.ts文件，代码大致如下：
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Tabs } from './tabs';
@NgModule({
declarations: [
Tabs,
],
imports: [
IonicPageModule.forChild(Tabs),
],
exports: [
Tabs
]
})
export class AboutModule {}
- 删除项目中所有 Page 的引入，并将对 Page 类的引用修改成对应 Page 的字符串名称。
错误解决
修改完成后，执行 ionic serve 运行，若有报错，则通过错误信息解决之。
我遇到这个错误：“No provider for ApplicationInitStatus!”
解决办法是在 app.module.ts 文件中添加如下引用：
import { BrowserModule } from '@angular/platform-browser';
...
@NgModule({
imports: [
HttpModule,
BrowserModule,
IonicModule.forRoot(MyApp)
]
})
结束的话
到 Ionic 3 的升级并不麻烦，却能让你的应用性能有很大的提升，所以这个升级还是值得的。如果你对升级 Ionic 3 有什么疑问欢迎给我留言，你也可以参考我写的示例项目去尝试解决问题。
