搜索文档 /

迁移向导

从离子4迁移。betway东盟体育appx到离子5betway东盟体育app

4.迁移应用程序。x 5.倍requires a few updates to the API properties, CSS utilities, and the installed package dependencies.

API和CSS更新

从4开始的破坏更改的完整列表。x 5.倍,please refer to 破坏变更文档 在离子核心回购betway东盟体育app。

包和依赖关系

对于基于Angular的项目,你可以简单地运行:


              npm
             
              安装
             @betway东盟体育appionic / angular@latest @ionic / angular-toolkit@latest——保存

对于React项目,你可以运行:


              npm
             
              安装
             @betway东盟体育appionic / react@latest @ionic / react-router@latest ionicons@latest

对于模板/香草JS项目,你可以运行:


              npm
             我@ibetway东盟体育apponic / core@latest——保存

如果您想要一个新的项目启动器,可以从CLI创建一个新的项目库,并手动迁移现有的应用程序。

从离子3.0迁移到离子4.0betway东盟体育app

对于一个 破坏更改的完整列表 从离子3到betway东盟体育app离子4,请参阅 破坏变更文档 在离子核心回购betway东盟体育app。

我们建议将现有的应用程序从Ionic 3迁移到Ionic 4的一般流程如下:betway东盟体育app

  1. 控件生成一个新项目 空白 起动器(见 启动应用程序
  2. 从中复制任何Angular服务 src /供应商 src /应用程序/服务
    • 服务应该包括 {providedIn: 'root'} @Injectable () 装饰。详情请参见Angular 提供文档
  3. 复制应用程序的其他根级项(管道,组件等),记住目录结构的变化 src /组件 src / app /组件 等。
  4. 复制全局Sass样式 src / app / app.scss src / global.scss
  5. 复制申请的其余部分,一页一页或一项一项地复制,记住以下事项:
    • 模拟阴影DOM默认是打开的
    • Page/component的Sass不应该再被包装在Page/component标签中,而应该使用Angular的 styleUrls 选择的 @ component 装饰
    • RxJS已经从版本5更新到版本6 RxJS变化
    • 某些生命周期钩子应该被Angular的钩子替换(参见 生命周期事件
    • 可能需要更改标记(可用迁移工具,请参阅 标记的变化

在许多情况下,使用Ionic CLI生成一个新对象betway东盟体育app,然后复制代码也非常有效。例如: betway东盟体育app离子服役天气 将创建一个shell 天气 服务和测试。然后可以从较早的项目中复制代码,并根据需要进行少量修改。这有助于确保遵循正确的结构。这也为单元测试生成shell。

包名更改

在iobetway东盟体育appno4中,包名为 @betway东盟体育appionic /角 .卸载ion3并使用新betway东盟体育app的包名安装ion4:


              
              npm
             卸载ionic-anbetway东盟体育appgular
              
              npm
             
              安装
             @betway东盟体育appionic /角

在迁移应用程序时,更新从其中导入的内容 betway东盟体育appionic-angular @betway东盟体育appionic /角

项目结构

离子3和离子4应用程序之间的一个主要变化是整个项目的布局和结构。betway东盟体育app在v3中,离子betway东盟体育app应用程序有一个自定义约定,关于应用程序应该如何设置以及文件夹结构应该是什么样子。在v4中,这已经更改为遵循每个受支持框架的推荐设置。

例如,如果一个应用正在使用Angular,那么该项目结构将与Angular CLI应用完全相同。这种更改虽然并不太难适应,但有助于保持通用模式和文档的一致性。

src /
app /
app-routing.module.ts
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
global.scss
index . html
karma.conf.js
main.ts
polyfills.ts
test.ts
tsconfig.app.json
tsconfig.spec.json
.gitignore
angular.json
betway东盟体育appionic.config.json
package.json
tsconfig.json
tslint.json
betway东盟体育app离子4
src /
app /
app.component.html
app.html
app.module.ts
app.scss
main.ts
页/
index . html
manifest.json
service-worker.js
.gitignore
betway东盟体育appionic.config.json
package.json
tsconfig.json
tslint.json
betway东盟体育app离子3

上面的比较是v4应用程序的项目结构的一个例子。对于有过普通Angular项目经验的开发人员来说,这应该很熟悉。

有一个 src / 目录作为应用程序的主目录 index . html 、任何资产、环境配置和任何特定于应用程序的配置文件。

在迁移应用程序以利用这种新的布局时,建议使用CLI创建一个新的项目“基础”。然后,在新的项目布局中,一块一块地迁移应用程序的功能。页面/组件/等。应该搬到 src / app / 文件夹中。

确保您的离子配置文件有适betway东盟体育app当的 类型 .v3的项目类型为 betway东盟体育appionic-angular .v4的项目类型是 .如果该值不正确,CLI可能会调用不正确的构建脚本。

看到下面的 betway东盟体育appionic.config.json 作为一个例子:


              
             
              “名称”
              
             
              “我的程序”
              
             
              “类型”
              
             
              “角”
             
              
复制 复制

RxJS变化

在V3和V4之间,RxJS被更新到版本6。这改变了许多操作符和核心RxJS函数的导入路径。请参见 RxJS迁移指南 获取详细信息。

生命周期事件

通过V4,我们现在能够利用由 .但是在某些情况下,您可能想要访问当组件在其路由更改期间完成动画时触发的事件。在这种情况下 ionViewWillEnter ionViewDidEnter ionViewWillLeave , ionViewDidLeave 已经从V3移植过来了。使用这些事件来协调离子自己的动画系统的行动。betway东盟体育app

老之类的事件 ionViewDidLoad ionViewCanLeave , ionViewCanEnter 已经被移除,应该使用合适的Angular替代方案。

要了解更多细节,请查看 router-outlet文档

覆盖组件

在先前版本的Ionic中,像Loadingbetway东盟体育app、Toast或Alert这样的覆盖组件是同步创建的。在Iobetway东盟体育appnic v4中,这些组件都是异步创建的。因此,API现在是基于承诺的。


              / / v3
             
              showAlert
              
              
             
              
             
              常量
             警报
              
             
              
              
             alertCtrl
              
              创建
              
              
             消息
              
             
              “你好”
              
             小标题
              
             
              “我是一个小标题”
             
              
              
              
             警报
              
              现在
              
              
              
             
              
复制 复制

在v4中,承诺被使用:


              showAlert
              
              
             
              
             
              
              
             alertCtrl
              
              创建
              
              
             消息
              
             
              “你好”
              
             小标题
              
             
              “我是一个小标题”
             
              
              
              
              然后
              
              警报
             
              =>
             警报
              
              现在
              
              
              
              
             
              
             
              //或者使用async/await
             
              异步
             
              showAlert
              
              
             
              
             
              常量
             警报
              
             
              等待
             
              
              
             alertCtrl
              
              创建
              
              
             消息
              
             
              “你好”
              
             小标题
              
             
              “我是一个小标题”
             
              
              
              
             
              等待
             警报
              
              现在
              
              
              
             
              
复制 复制

在V4中,导航收到的更改最多。而不是用爱奥尼亚自己的betway东盟体育app NavController ,我们集成了官方的Angular路由器。这不仅提供了跨应用程序的一致路由体验,而且更加可靠。Angular团队有一个 优秀的导游 在他们的文档网站上详细介绍了路由器。

为了提供用户所习惯的特定于平台的动画,我们已经创建了 ion-router-outlet 角的应用。它的行为方式与Angular类似 router-outlet 但是提供了基于堆栈的导航(标签)和动画。

有关V4项目中导航工作的详细说明,请查看 角导航指南

延迟加载

由于导航发生了变化,V4中的延迟加载机制也发生了变化。

在v3中,典型的惰性加载设置是这样的:


              / / home.page.ts
             
              betway东盟体育appIonicPage
              
              
             
              
             
              “回家”
             
              
              
             
              组件
              
              
             
              ...
             
              
              
             
              出口
             
              
             
              主页
             
              
              
             
              / / home.module.ts
             
              NgModule
              
              
             声明
              
             
              
             主页
              
              
             进口
              
             
              
             betway东盟体育appIonicPageModule
              
              forChild
              
             主页
              
              
             
              
              
             
              出口
             
              
             
              HomePageModule
             
              
              
复制 复制

但是,在v4中,惰性加载是通过 loadChildren Angular路由器的方法:


              / / home.module.ts
             
              NgModule
              
              
             进口
              
             
              
             betway东盟体育appIonicModule
              
             RouterModule
              
              forChild
              
              
              
             路径
              
             
              ''
              
             组件
              
             主页
              
              
              
             
              
              
             声明
              
             
              
             主页
              
             
              
              
             
              出口
             
              
             
              HomePageModule
             
              
              
             
              / / app.module.ts
             
              NgModule
              
              
             声明
              
             
              
             AppComponent
              
              
             进口
              
             
              
             BrowserModule
              
             betway东盟体育appIonicModule
              
              forRoot
              
              
              
             RouterModule
              
              forRoot
              
              
             
              
             路径
              
             
              “回家”
              
             loadChildren
              
             
              ”。/页面/ home / home.module # HomePageModule '
             
              
              
             
              
             路径
              
             
              ''
              
             redirectTo
              
             
              “回家”
              
             pathMatch
              
             
              “全部”
             
              
             
              
              
             
              
              
             引导
              
             
              
             AppComponent
              
             
              
              
             
              出口
             
              
             
              AppModule
             
              
              
复制 复制

有关V4项目中延迟加载的详细说明,请查看 角导航指南

标记的变化

自从v4移到Custom Elements后,每个组件的标记都发生了重大变化。这些更改都是按照自定义元素规范进行的,并且已经在 GitHub上的专用文件

为了帮助处理这些标记更改,我们发布了一个基于tslint的版本 迁移工具 ,它可以检测问题,甚至可以自动修复其中一些问题。

从离子1.0迁移到离子4.0betway东盟体育app

betway东盟体育app离子1.0到离子4.0:涉及到什么?

从Ionic 1迁移到Ionibetway东盟体育appc 4.0涉及到从AngularJS(也就是Angular 1)迁移到Angular 7+。这些版本之间有许多架构上的差异,所以一些应用程序代码将不得不重写。所涉及的工作量取决于应用程序的复杂性和大小。

一个好处是,在大多数情况下,您所知道并喜爱的ioniui组件并没有改变太多。betway东盟体育app

以下是在开始升级之前需要考虑的一些事项:

  • 应用程序的复杂性 当然,应用越大、越复杂,迁移的时间就越长。
  • 框架支持 2019年,Ionicbetway东盟体育app将发布对React的完全支持。您也可以使用离子框架组件betway东盟体育app 没有一个框架 .由于这些还没有投入生产,我们建议继续使用Angular,或者等到其他框架支持可用时再使用。
  • 预算和团队组成 :迁移项目的长度会根据你的团队规模、应用程序的复杂程度以及用于迁移的时间长短而有所不同。

建议策略

一旦您的开发团队确定了开始迁移的良好时间框架,Ionic建议冻结Ionic 1应用程序的特性并整理代码:修复任何主要错误,消除技术债务,并根据您的需要重新组织。betway东盟体育app然后,确定哪些功能可以迁移,哪些功能可以放弃。

一旦iona1应用betway东盟体育app程序稳定下来,创建一个新的ion4.0项目。开发团队的大部分注意力应该放在新项目上;离子型1的应用程序只需要修复bug,以确保转换尽可能快速、平稳地进betway东盟体育app行。

一旦团队认为Ionic 4.0应用程序已经变得稳定,并实现了一组核心功能,你betway东盟体育app就可以关闭Ionic 1应用程序了。

从AngularJS转移到Angular

请参考官方 角升级指南 信息。

betway东盟体育app离子的变化

我们上面betway东盟体育app的ionag3.0到ionag4.0迁移部分可能是一个有用的参考。使用空白启动器生成一个新的Iobetway东盟体育appnic 4.0项目(参见 启动应用程序 ).花些时间熟悉Ionic 4.0组件。betway东盟体育app构建快乐!

需要帮助吗?

如果您的团队需要协助迁移,请 联系我们 !betway东盟体育appIonic提供咨询服务,包括Ionic 4.0培训、架构审查和迁移协助。

以前的
浏览器支持
Baidu