Skip to main content
Version: v8 (beta)

Updating from Ionic 6 to 7

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.

Breaking Changes

For a complete list of breaking changes from Ionic 6 to Ionic 7, please refer to the breaking changes document in the Ionic Framework repository.

Getting Started​

Angular​

  1. Ionic 7 supports Angular 14+. Update to the latest version of Angular by following the Angular Update Guide.
  2. If your project is using rxjs, Ionic 7 requires a minimum rxjs version of 7.5.0:
npm install rxjs@7.5.0
  1. Update to the latest version of Ionic 7:
npm install @ionic/angular@7

If you are using Ionic Angular Server and Ionic Angular Toolkit, be sure to update those as well:

npm install @ionic/angular@7 @ionic/angular-server@7 @ionic/angular-toolkit@9

Note: @ionic/angular-toolkit@9 requires a minimum of Angular 15. If you are still on Angular 14, then you can skip updating to @ionic/angular-toolkit@9.

React​

  1. Ionic 7 supports React 17+. Update to the latest version of React:
npm install react@latest react-dom@latest
  1. Update to the latest version of Ionic 7:
npm install @ionic/react@7 @ionic/react-router@7

Vue​

  1. Ionic 7 supports Vue 3.0.6+. Update to the latest version of Vue:
npm install vue@latest vue-router@latest
  1. Update to the latest version of Ionic 7:
npm install @ionic/vue@7 @ionic/vue-router@7

Core​

  1. Update to the latest version of Ionic 7:
npm install @ionic/core@7

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​

  1. ActionSheetAttributes, AlertAttributes, AlertTextareaAttributes, AlertInputAttributes, LoadingAttributes, ModalAttributes, PickerAttributes, PopoverAttributes, and ToastAttributes have been removed. Developers should use { [key: string]: any } instead.

Checkbox​

  1. Rename any usages of the --background and --background-checked CSS Variables to --checkbox-background and --checkbox-background-checked, respectively.

Datetime​

  1. Remove any code that sets the value property to the empty string ('').
  2. 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​

  1. Update any code that accesses the detail payload for the ionInput event from event.detail to event.detail.value as the detail payload is now an object containing a value and an event.
  1. Remove any usage of the swipeToClose property. Card modals are swipeable by default, so you can remove swipeToClose if you want your card modal to remain swipeable. Use the canDismiss property if you want to prevent a modal from dismissing.
  2. Remove any code that sets the canDismiss property to undefined. The canDismiss property now defaults to true, so this code is no longer needed.

Picker​

  1. Remove any code that accesses refresh on ion-picker-column. Developers should use the columns property on ion-picker to refresh the view instead.
  1. Update any code that accesses the detail payload for the ionInput event from event.detail to event.detail.value as the detail payload is now an object containing a value and an event.

Segment​

  1. Remove any code that sets the value property to null. Developers should use either '' or undefined instead.

Slides​

  1. 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​

  1. Update any code that accesses the detail payload for the ionInput event from event.detail to event.detail.value as the detail payload is now an object containing a value and an event.

Toggle​

  1. Rename any usages of the --background and --background-checked CSS Variables to --track-background and --track-background-checked, respectively.

Virtual Scroll​

  1. 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.

Contents

Edit this page