如何将 Ionic Cordova 3 迁移到 Ionic Cordova 5？

Posted 2023-03-04

【中文标题】如何将 Ionic Cordova 3 迁移到 Ionic Cordova 5？

【英文标题】：How to migrate Ionic Cordova 3 to Ionic Cordova 5?

【发布时间】：2020-08-29 14:55:25

【问题描述】：

我有 Ionic 3 项目，我必须升级 到 Ionic 5。 请需要最好的方式来升级项目。

【参考方案1】：

您可以分两步完成。

离子 3 到离子 4

有关从 Ionic 3 到 Ionic 4 的重大更改的完整列表， 请参考 Ionic 核心仓库中的the breaking changes document。

在 Ionic 4 中，包名是 @ionic/angular。卸载 Ionic 3 并使用新的包名安装 Ionic 4：

npm uninstall ionic-angular
npm install @ionic/angular

将现有应用程序从 Ionic 3 迁移到 4 时的一般过程：

使用blank 启动器生成一个新项目（参见Starting an App）

将任何 Angular 服务从 src/providers 复制到 src/app/services

服务应在@Injectable() 中包含 providedIn: 'root' 装饰师。详情请见Angularprovider docs。

复制应用程序的其他根级项目（管道、组件等） 请记住，目录结构从 src/components 到 src/app/components 等

将全局 Sass 样式从 src/app/app.scss 复制到 src/global.scss

逐页或按功能复制应用程序的其余部分 功能，请牢记以下几点：

Emulated Shadow DOM 默认开启 页面/组件 Sass 不应再包装在页面/组件标签中，而应使用 Angular 的 @Component 装饰器的 styleUrls 选项 RxJS 已从 v5 更新到 v6（参见 RxJS Changes） 某些生命周期钩子应该被 Angular 的钩子替换（参见Lifecycle Events） 可能需要更改标记（迁移工具可用，请参阅Markup Changes）

在许多情况下，使用 Ionic CLI 生成一个新对象然后复制代码也很有效。例如：ionic g service weather 将创建一个 shell Weather 服务并进行测试。然后可以根据需要从旧项目中复制代码，并进行少量修改。这有助于确保遵循正确的结构。这也会生成用于单元测试的 shell。

离子 4 到离子 5

将应用从 4.x 迁移到 5.x 需要对 API 属性 CSS utilities 和已安装的包依赖项进行一些更新。

有关从 4.x 到 5.x 的重大更改的完整列表，请参阅 Ionic 核心存储库中的 the breaking changes document。

对于基于 Angular 的项目，您可以简单地运行：

npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save

有关更多信息和说明，请查看Migration Guide。