[TOC] ## 从Ionic 3.0迁移到Ionic 4.0 - 概述 将现有应用程序从Ionic 3迁移到4时，我们建议以下一般过程： 1. 使用`blank`启动器生成一个新项目（请参阅[启动应用程序](https://ionicframework.com/docs/building/starting)） 2. 将任何Angular服务复制`src/providers`到`src/app/services` * 服务应该包含`{ providedIn: 'root' }`在`@Injectable()`装饰者中。有关详细信息，请参阅Angular[提供商文档](https://angular.io/guide/providers)。 3. 复制应用程序的其他根级别项目（管道，组件等），同时记住目录结构从更改`src/components`为`src/app/components`，等等。 4. 将全局Sass样式复制`src/app/app.scss`到`src/global.scss` 5. 复制应用程序的其余部分，逐页或逐个功能，记住以下项目： * 默认情况下，Emulated Shadow DOM处于启用状态 * 页面/组件Sass不应再包含在页面/组件标记中，而应使用Angular的装饰器[`styleUrls`](https://angular.io/api/core/Component#styleUrls)选项`@Component` * RxJS已从v5更新为v6（参见[RxJS更改](https://ionicframework.com/docs/building/migration#rxjs-changes)） * 某些生命周期钩子应该被Angular的钩子取代（参见[生命周期事件](https://ionicframework.com/docs/building/migration#lifecycle-events)） * 可能需要更改标记（可用的迁移工具，请参阅[标记更改](https://ionicframework.com/docs/building/migration#markup-changes)） 在许多情况下，使用Ionic CLI生成新对象然后复制代码也可以很好地工作。例如：`ionic g service weather`将创建一个shell`Weather`服务并进行测试。然后可以根据需要对旧代码中的代码进行微小修改。这有助于确保遵循正确的结构。这也为单元测试生成shell。 ## 包名称的更改 在Ionic 4中，包名是`@ionic/angular`。卸载Ionic 3并使用新软件包名称安装Ionic 4： ~~~ $ npm uninstall ionic-angular $ npm install @ionic/angular ~~~ 迁移应用时，请将导入更新`ionic-angular`为`@ionic/angular`。 ## 项目结构 Ionic 3应用程序和Ionic 4应用程序之间的主要变化之一是整体项目布局和结构。在第3版中，Ionic应用程序有一个自定义约定，用于设置应用程序的方式以及该文件夹结构的外观。在v4中，已更改为遵循每个受支持框架的建议设置。 例如，如果某个应用程序正在使用Angular，那么该项目结构将与Angular CLI应用程序完全相同。这种变化虽然不太难以适应，但有助于保持常见的模式和文档的一致性。 上面的比较是v4应用程序项目结构的一个示例。对于具有香草Angular项目经验的开发人员来说，这应该感觉非常熟悉。 有一个`src/`目录充当应用程序的主页。这包括`index.html`任何资产，环境配置和任何特定于应用程序的配置文件。 在迁移应用程序以利用此新布局时，建议使用CLI创建新项目“基础”。然后，使用新项目布局，逐个迁移应用程序的功能。页/组件/等。应该移动到`src/app/`文件夹中。 确保您的Ionic配置文件具有适当的配置文件`type`。v3的项目类型是`ionic-angular`。v4的项目类型是`angular`。如果此值不正确，CLI可能会调用不正确的构建脚本。 请参阅以下`ionic.config.json`示例： ~~~ { "name": "my-app", "type": "angular" } ~~~ ## RxJS变化 在V3和V4之间，RxJS更新为版本6.这改变了运算符和核心RxJS函数的许多导入路径。有关详细信息，请参阅[RxJS迁移指南](https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md)。 ## 生命周期事件 使用V4，我们现在可以利用[Angular](https://angular.io/guide/lifecycle-hooks)提供的典型事件。但是对于某些情况，您可能希望能够访问组件在路由更改期间完成动画时触发的事件。在这种情况下，`ionViewWillEnter`，`ionViewDidEnter`，`ionViewWillLeave`，和`ionViewDidLeave`已经从V3移植过来。使用这些事件来协调与Ionic自己的动画系统的动作。 较早的事件，如`ionViewDidLoad`，`ionViewCanLeave`和`ionViewCanEnter`已被删除，而应采用适当的角度选择。 有关详细信息，请查看[router-outlet docs](https://ionicframework.com/docs/api/router-outlet) ## 叠加组件 在Ionic的早期版本中，同步创建了诸如Loading，Toast或Alert之类的覆盖组件。在Ionic v4中，这些组件都是异步创建的。因此，API现在基于承诺。 ~~~ // v3 showAlert() { const alert = this.alertCtrl.create({ message: "Hello There", subHeader: "I'm a subheader" }); alert.present(); } ~~~ 在第4节中，使用了承诺： ~~~ showAlert() { this.alertCtrl.create({ message: "Hello There", subHeader: "I'm a subheader" }).then(alert => alert.present()); } // Or using async/await async showAlert() { const alert = await this.alertCtrl.create({ message: "Hello There", subHeader: "I'm a subheader" }); await alert.present(); } ~~~ ## 导航 在V4中，导航收到的变化最多。现在，我们不是使用Ionic自己的`NavController`，而是与官方Angular路由器集成。这不仅可以跨应用程序提供一致的路由体验，而且更加可靠。Angular团队在他们的文档站点上有一个[很好的指南](http://angular.io/guide/router)，非常详细地介绍了路由器。 为了提供用户习惯的平台特定动画，我们`ion-router-outlet`为Angular Apps创建了动画。这与Angular类似，`router-outlet`但提供了基于堆栈的导航（制表符）和动画。 有关V4项目导航工作的详细说明，请查看[角度导航指南](https://ionicframework.com/docs/navigation/angular)。 ## 延迟加载 由于导航已更改，延迟加载的机制也在V4中发生了变化。 在v3中，典型的延迟加载设置如下： ~~~ // home.page.ts @IonicPage({ segment: 'home' }) @Component({ ... }) export class HomePage {} // home.module.ts @NgModule({ declarations: [HomePage], imports: [IonicPageModule.forChild(HomePage)] }) export class HomePageModule {} ~~~ 但是，在v4中，延迟加载是通过`loadChildren`Angular路由器的方法完成的： ~~~ // home.module.ts @NgModule({ imports: [ IonicModule, RouterModule.forChild([{ path: '', component: HomePage }]) ], declarations: [HomePage] }) export class HomePageModule {} // app.module.ts @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, IonicModule.forRoot(), RouterModule.forRoot([ { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' }, { path: '', redirectTo: 'home', pathMatch: 'full' } ]) ], bootstrap: [AppComponent] }) export class AppModule {} ~~~ 有关V4项目中延迟加载的详细说明，请查看[Angular导航指南](https://ionicframework.com/docs/building/docs/navigation/angular#lazy-loading-routes)。 ## [标记更改](https://ionicframework.com/docs/building/migration#markup-changes) 由于v4已移至自定义元素，因此每个组件的标记都发生了重大变化。这些更改都是按照自定义元素规范进行的，并已记录在[Github上](https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#breaking-changes)的[专用文件中](https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#breaking-changes)。 为了帮助完成这些标记更改，我们发布了一个基于TSLint的[迁移工具](https://github.com/ionic-team/v4-migration-tslint)，它可以检测问题，甚至可以自动修复其中的一些问题。 ## 从Ionic 1.0迁移到Ionic 4.0 - 概述 ### 离子1.0到离子4.0：涉及什么？ 从Ionic 1迁移到Ionic 4.0涉及从AngularJS（又名Angular 1）迁移到Angular 7+。这些版本之间存在许多架构差异，因此必须重写某些应用程序代码。涉及的工作量取决于应用程序的复杂性和大小。 一个好处是，在大多数情况下，你知道并喜欢V1的Ionic UI组件并没有太大变化。 以下是在开始升级之前要检查的一些注意事项： * **应用程序复杂性**：当然，应用程序越大越复杂，迁移所需的时间就越长。 * **框架支持**：在2019年，Ionic将发布对React和Vue的全面支持。您还可以使用Ionic Framework组件[没有框架](https://ionicframework.com/docs/installation/cdn/)。由于这些还没有准备好生产，我们建议坚持使用Angular或等到其他框架支持可用。 * **预算和团队组成**：迁移项目的长度将根据团队规模，应用程序的复杂程度以及分配的过渡时间而有所不同。 ### 建议的策略 一旦您的开发团队确定了开始迁移的良好时间框架，Ionic建议冻结Ionic 1应用程序并按顺序获取代码：修复任何重大错误，消除技术债务，并根据您的需要进行重组。然后，确定要迁移的功能和要放弃的功能。 一旦Ionic 1应用程序稳定，就创建一个新的Ionic 4.0项目。开发团队的大部分注意力应该放在新项目上;只应在Ionic 1应用程序中修复错误，以确保尽可能快速，平稳地进行转换。 一旦团队感到舒适，Ionic 4.0应用程序已经稳定并且已经完成了一组核心功能，那么您可以关闭Ionic 1应用程序。 ### 从AngularJS迁移到Angular 请参考官方[Angular升级指南](https://angular.io/guide/upgrade)信息。 ### 离子变化 我们上面的Ionic 3.0到Ionic 4.0迁移部分可能是一个有用的参考。使用空白启动器生成新的Ionic 4.0项目（请参阅[启动应用程序](https://ionicframework.com/docs/building/starting)。花时间熟悉Ionic 4.0组件。快乐的建筑！ ### 需要帮助？ 如果您的团队希望获得迁移方面的帮助，请[与我们联系](https://ionicframework.com/enterprise-engine)！Ionic提供咨询服务，包括Ionic 4.0培训，架构评审和迁移帮助。