Updating from Ionic 6 to Ionic 7
note
Ionic 7 is in beta. Please report any issues on the Ionic Framework GitHub Repo.
note
This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the Upgrading to Ionic 6 Guide before starting this guide.
Getting Started
Angular
- Ionic 7 supports Angular 14+. Update to the latest version of Angular by following the Angular Update Guide.
- Update to the latest version of Ionic 7:
npm install @ionic/angular@next
If you are using Ionic Angular Server, be sure to update that as well:
npm install @ionic/angular@next @ionic/angular-server@next
React
- Ionic 7 supports React 17+. Update to the latest version of React:
npm install react@latest react-dom@latest
- Update to the latest version of Ionic 7:
npm install @ionic/react@next @ionic/react-router@next
Vue
- Ionic 7 supports Vue 3.0.6+. Update to the latest version of Vue:
npm install vue@latest vue-router@latest
- Update to the latest version of Ionic 7:
npm install @ionic/vue@next @ionic/vue-router@next
Core
- Update to the latest version of Ionic 7:
npm install @ionic/core@next
Updating Your Code
Browser Support
The list of browsers that Ionic supports has changed. Review the Browser Support Guide to ensure you are deploying apps to supported browsers.
If you have a browserslist
or .browserslistrc
file, update it with the following content:
Chrome >=79
ChromeAndroid >=79
Firefox >=70
Edge >=79
Safari >=14
iOS >=14
Types
ActionSheetAttributes
,AlertAttributes
,AlertTextareaAttributes
,AlertInputAttributes
,LoadingAttributes
,ModalAttributes
,PickerAttributes
,PopoverAttributes
, andToastAttributes
have been removed. Developers should use{ [key: string]: any }
instead.
Checkbox
- Rename any usages of the
--background
and--background-checked
CSS Variables to--checkbox-background
and--checkbox-background-checked
, respectively.
Datetime
- Remove any code that sets the
value
property to the empty string (''
). - Remove any code that accesses the time zone information on the
value
property. Datetime does not manage time zones, so any time zone information provided is ignored.
Input
- Update any code that accesses the
detail
payload for theionInput
event fromevent.detail
toevent.detail.value
as the detail payload is now an object containing a value and an event.
Modal
- Remove any usage of the
swipeToClose
property. Use the canDismiss property to control when a modal can dismiss. - Remove any code that sets the
canDismiss
property toundefined
. ThecanDismiss
property now defaults totrue
, so this code is no longer needed.
Picker
- Remove any code that accesses
refresh
onion-picker-column
. Developers should use thecolumns
property onion-picker
to refresh the view instead.
Searchbar
- Update any code that accesses the
detail
payload for theionInput
event fromevent.detail
toevent.detail.value
as the detail payload is now an object containing a value and an event.
Segment
- Remove any code that sets the
value
property tonull
. Developers should use either''
orundefined
instead.
Slides
- Remove
ion-slides
,ion-slide
, and any associated types. These components have been removed in favor of using Swiper.js directly. The guides below contain more information about this migration:
Angular Migration Guide
React Migration Guide
Vue Migration Guide
Textarea
- Update any code that accesses the
detail
payload for theionInput
event fromevent.detail
toevent.detail.value
as the detail payload is now an object containing a value and an event.
Toggle
- Rename any usages of the
--background
and--background-checked
CSS Variables to--track-background
and--track-background-checked
, respectively.
Virtual Scroll
- Remove
ion-virtual-scroll
and any associated types. This component has been removed in favor of using virtual scroll solutions provided by JavaScript Frameworks. The guides below contain more information about this migration:
Angular Migration Guide
React Migration Guide
Vue Migration Guide
Need Help Upgrading?
Be sure to look at the Ionic 7 Breaking Changes Guide. There were several changes to default property and CSS Variable values that developers may need to be aware of. Only the breaking changes that require user action are listed on this page.
If you need help upgrading, please post a thread on the Ionic Forum.