迁移向导
从ion4迁移过来。betway东盟体育appx到ionbetway东盟体育app5 .x
从4迁移应用程序。X至5.xrequires a few updates to the API properties, CSS utilities, and the installed package dependencies.
API和CSS更新
以获取来自4的中断更改的完整列表。X至5.x,please refer to 中断更改文档 爱离子型核心回betway东盟体育app购。
包和依赖关系
对于基于Angular的项目，你可以简单地运行:
npm
安装
@betway东盟体育appionic/angular@latest @ionic/angular-toolkit@latest——save对于React项目，你可以运行:
npm
安装
@betway东盟体育appionic/react@latest @ionic/react-router@latest ionicons@latest对于Stencil / vanilla JS项目，你可以运行:
npm
我@ibetway东盟体育apponic/core@latest——save如果你想要一个新的项目启动器，可以从CLI创建一个新的项目库，并手动迁移一个现有的应用程序。
从离子型3.0迁移到离子型4.betway东盟体育app0
对于一个 中断更改的完整列表 从离子型3betway东盟体育app到离子型4，请参考 中断更改文档 爱离子型核心回betway东盟体育app购。
当将现有的应用程序从ionion3迁移到ionion3时，我们建议执行以下一般流程:betway东盟体育app
-
方法生成一个新项目
空白起动器(见启动应用程序 ） -
复制所有Angular服务
src /供应商来src /应用程序/服务-
服务应包括
{providedIn: 'root'}在@Injectable ()装饰。详情请参见Angular 提供文档 ．
-
服务应包括
-
复制应用程序的其他根级项目(管道、组件等)，记住目录结构从
src /组件来src / app /组件等。 -
复制全局Sass样式
src / app / app.scss来src / global.scss - 一页一页或一个特性一个特性地复制应用程序的其余部分，记住以下事项:
在许多情况下，使用Ionic CLI生成一个新对象betway东盟体育app，然后复制代码也可以很好地工作。例如:
betway东盟体育appiong服务天气
会创建一个外壳
天气
服务和测试。然后可以从旧的项目中复制代码，并根据需要进行少量修改。这有助于确保遵循适当的结构。这也为单元测试生成外壳。
包名称变更
在iobetway东盟体育appn4中，软件包名称为
@betway东盟体育appionic /角
．卸载离子型3，使用新betway东盟体育app的软件包名称安装离子型4:
＄
npm
卸载ionic-anbetway东盟体育appgular
＄
npm
安装
@betway东盟体育appionic /角
在迁移应用程序时，更新导入
betway东盟体育appionic-angular
来
@betway东盟体育appionic /角
．
项目结构
ionion3和ionion4之间的一个主要变化是项目的整体布局和结构。betway东盟体育app在v3中，Iobetway东盟体育appnic应用程序对于应用程序应该如何设置以及文件夹结构应该是什么样子有一个自定义约定。在v4中，这已更改为遵循每个支持框架的推荐设置。
例如，如果一个应用正在使用Angular，那么该项目结构将与Angular CLI应用完全相同。这个更改虽然并不太难适应，但有助于保持公共模式和文档的一致性。
上面的比较是v4应用程序的项目结构的一个例子。对于有过普通Angular项目经验的开发人员来说，这应该非常熟悉。
有一个
src /
目录，它作为应用程序的家
index . html
、任何资产、环境配置以及任何特定于应用程序的配置文件。
当迁移一个应用程序来利用这个新的布局时，建议使用CLI创建一个新的项目“base”。然后，使用新的项目布局，一点一点地迁移应用程序的功能。页面/组件/等。应该搬进去吗
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替代方案。
欲了解更多细节，请查看
覆盖组件
在早期版本的Ionic中，覆盖组件(如Lobetway东盟体育appading、Toast或Alert)是同步创建的。在Iobetway东盟体育appnic v4中，这些组件都是异步创建的。因此，API现在是基于承诺的。
/ / v3
showAlert
（
）
｛
常量
警报
＝
这
．
alertCtrl
．
创建
（
｛
消息
：
“你好”
,
小标题
：
"我是一个子标题"
}
）
；
警报
．
现在
（
）
；
}在v4中，使用promise:
showAlert
（
）
｛
这
．
alertCtrl
．
创建
（
｛
消息
：
“你好”
,
小标题
：
"我是一个子标题"
}
）
．
然后
（
警报
= >
警报
．
现在
（
）
）
；
}
//或者使用async/await
异步
showAlert
（
）
｛
常量
警报
＝
等待
这
．
alertCtrl
．
创建
（
｛
消息
：
“你好”
,
小标题
：
"我是一个子标题"
}
）
；
等待
警报
．
现在
（
）
；
}导航
在V4中，导航接收到的更改最多。现在，不是用爱奥尼亚自己的betway东盟体育app
NavController
，我们集成了官方的Angular路由器。这不仅在应用程序之间提供了一致的路由体验，而且更加可靠。Angular团队有一个
优秀的导游
在他们的文档网站上，详细介绍了路由器。
为了提供用户习惯的特定于平台的动画，我们已经创建了
ion-router-outlet
用于Angular应用。它的行为方式与Angular的类似
router-outlet
但是提供了基于堆栈的导航(选项卡)和动画。
有关V4项目中导航工作的详细说明，请参阅
延迟加载
由于导航发生了变化，V4中延迟加载的机制也发生了变化。
在v3中，典型的延迟加载设置是这样的:
/ / home.page.ts
@
betway东盟体育appIonicPage
（
｛
段
：
“回家”
}
）
@
组件
（
｛
.．.
}
）
出口
类
主页
｛
}
/ / home.module.ts
@
NgModule
（
｛
声明
：
［
主页
］
,
进口
：
［
betway东盟体育appIonicPageModule
．
forChild
（
主页
）
］
}
）
出口
类
HomePageModule
｛
}
然而，在v4中，延迟加载是通过
loadChildren
方法:
/ / 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的 迁移工具 该软件可以检测问题，甚至可以自动修复其中一些问题。
从ion1.0迁移到ion4.betway东盟体育app0
betway东盟体育app离子型1.0到离子型4.0:涉及到什么?
从Ionic 1迁移到Ionibetway东盟体育appc 4.0需要从AngularJS(也就是Angular 1)迁移到Angular 7+。这些版本之间有很多架构上的差异，因此一些应用程序代码将不得不重写。涉及的工作量取决于应用程序的复杂性和大小。
一个优点是，在大多数情况下，你从V1中了解并喜爱的离子型UI组件变化不大。betway东盟体育app
以下是在开始升级之前需要检查的一些注意事项:
- 应用程序的复杂性 :自然，应用程序越大、越复杂，迁移所需的时间就越长。
-
框架支持
2019年，Ionicbetway东盟体育app将发布对React的全面支持。您还可以使用Ionic Framebetway东盟体育appwork组件
没有框架 ．由于这些都还没有投入生产，我们建议坚持使用Angular，或者等到其他框架支持可用时再使用。 - 预算和团队组成 :一个迁移项目的长度将根据您的团队的规模、应用程序的复杂性以及分配到进行迁移的时间数量而变化。
建议策略
一旦您的开发团队确定了开始迁移的良好时间框架，Ionic建议冻结Ionic 1应用程序的功能，并按顺序整理代码:修复任何主要bug，消除技术债务，并根据您的需要进行重组。betway东盟体育app然后，确定哪些特性需要迁移，哪些需要放弃。
一旦Ionic 1betway东盟体育app应用稳定，创建一个新的Ionic 4.0项目。开发团队的大部分注意力应该放在新项目上;只需修复ion1应用程序中的bug，以确保过渡尽可能快速、顺利地进betway东盟体育app行。
一旦团队认为Ionic 4.0的应用程序已经变得稳定，并满足了一系列核心功能betway东盟体育app，就可以关闭Ionic 1应用程序了。
从AngularJS迁移到Angular
请参考官方 Angular升级指南 信息。
betway东盟体育app离子的变化
我们上面betway东盟体育app的离子型3.0到离子型4.0迁移部分可能被证明是一个有用的参考。使用空白启动器生成一个新的Iobetway东盟体育appnic 4.0项目(参见
需要帮助吗?
如果您的团队需要协助迁移，请 向我们伸出援手 ！betway东盟体育appIonic提供咨询服务，包括离子型4.0培训、体系结构审查和迁移帮助。
