Updating from Ionic 5 to 6
注記
This guide assumes that you have already updated your app to the latest version of Ionic 5. Make sure you have followed the Updating to Ionic 5 Guide before starting this guide.
Breaking Changes
For a complete list of breaking changes from Ionic 5 to Ionic 6, please refer to the breaking changes document in the Ionic Framework repository.
Getting Started
Angular
- Ionic 6 supports Angular 12+. Update to the latest version of Angular by following the Angular Update Guide.
- Update to the latest version of Ionic 6:
npm install @ionic/angular@6
If you are using Ionic Angular Server, be sure to update that as well:
npm install @ionic/angular@6 @ionic/angular-server@6
- Remove any usage of
Config.set()
. Instead, set your config inIonicModule.forRoot()
. See the Angular Config Documentation for more examples. - Remove any usage of the
setupConfig
function previously exported from@ionic/angular
. Set your config inIonicModule.forRoot()
instead.
React
- Ionic 6 supports React 17+. Update to the latest version of React:
npm install react@latest react-dom@latest
- Update to the latest version of Ionic 6:
npm install @ionic/react@6 @ionic/react-router@6
- Update the
test
field in thescripts
object of yourpackage.json
to includetransformIgnorePatterns
:
"scripts": {
"test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
...
}
- Import and call
setupIonicReact
in yourApp
component file. If you are also usingsetupConfig
, pass your config tosetupIonicReact
instead:
Before
App.tsx
import { setupConfig } from '@ionic/react';
...
setupConfig({
mode: 'md'
});
After
App.tsx
import { setupIonicReact } from '@ionic/react';
...
setupIonicReact({
mode: 'md'
});
注記
Developers must import and call setupIonicReact
even if they are not setting custom config.
See the React Config Documentation for more examples.
- Update all controller imports from
@ionic/core
to@ionic/core/components
. As an example, here is a migration formenuController
:
Before
import { menuController } from '@ionic/core';
After
import { menuController } from '@ionic/core/components';
Vue
- Ionic 6 supports Vue 3.0.6+. Update to the latest version of Vue:
npm install vue@3 vue-router@4
- For apps that use the Vue CLI, install Vue CLI 5:
npm install -g @vue/cli@next
Then, upgrade all Vue CLI plugins:
vue upgrade --next
- Update to the latest version of Ionic 6:
npm install @ionic/vue@6 @ionic/vue-router@6
- Add the following
transformIgnorePatterns
to eitherjest.config.js
or thejest
field inpackage.json
:
jest.config.js
module.exports = {
...
transformIgnorePatterns: ['/node_modules/(?!@ionic/vue|@ionic/vue-router|@ionic/core|@stencil/core|ionicons)']
}
package.json
{
...
"jest": {
"transformIgnorePatterns": ["/node_modules/(?!@ionic/vue|@ionic/vue-router|@ionic/core|@stencil/core|ionicons)"]
}
}