Ionic 9: New Features, Changes and Migration Guide

Ionic 9 is here, bringing important updates to the Ionic Framework ecosystem with a stronger focus on modern Angular development, standalone components, improved TypeScript support, cleaner package exports, and better alignment with current web standards.

For developers upgrading from Ionic 8, Ionic 9 is more than a simple version bump. The release introduces several important changes across Angular, React, Vue, routing, components, browser support, and native integrations.

The biggest changes are particularly relevant to Angular developers. Ionic 9 supports Angular 18 through Angular 22, introduces standalone components as the default import path, supports Angular’s zoneless change detection, and deprecates IonicModule in favor of provideIonicAngular().

This guide explains the major Ionic 9 changes, compatibility requirements, breaking changes, and the recommended migration process.

What Is Ionic 9?

Ionic 9 is the latest major version of the Ionic Framework, an open-source UI toolkit for building cross-platform applications using web technologies such as HTML, CSS, and JavaScript.

Ionic allows developers to create applications for Android, iOS, and the web while sharing much of the same codebase. It supports popular frontend frameworks including Angular, React, and Vue.

Ionic 9 continues this approach while updating the framework for newer versions of these ecosystems.

According to the official Ionic migration guide, Ionic 9 supports:

• Angular 18 through Angular 22
• React 18+
• Vue 3.5+
• TypeScript 5.4+
• Capacitor 7 and later
• Vue Router 5
• React Router 6

The upgrade is therefore particularly significant for projects that have been using older Angular, React Router, Vue Router, or Ionic APIs.

How to Update to Ionic 9

Before upgrading, Ionic recommends updating your project to the latest Ionic 8 release.

Ionic also provides an automated migration tool that can scan your project and apply migrations that can safely be automated.

Run:

npx @ionic/migrate

The migration tool checks your project, applies relevant changes, and provides a checklist for changes that still require manual intervention.

It is recommended to commit your existing changes before running the migration because the tool modifies files in place.

You can also use:

npx @ionic/migrate --dry-run

to see what would be changed without modifying your project.

For CI environments, the --check option can be useful:

npx @ionic/migrate --check

Ionic recommends running the migration tool once for the major-version upgrade and reviewing the resulting changes before committing them.

Ionic 9 and Angular

Angular developers will notice some of the most important Ionic 9 changes.

Ionic 9 supports Angular versions 18 through 22. Angular 16 and 17 are no longer supported.

To update Ionic Angular, use:

npm install @ionic/angular@latest

If your application uses Ionic Angular Server or Ionic Angular Toolkit, update those packages as well:

npm install @ionic/angular@latest @ionic/angular-server@latest @ionic/angular-toolkit@latest

The exact Angular version you should use depends on your existing project and its dependencies.

Zoneless Change Detection

One of the most important changes for Angular developers is Ionic 9’s support for zoneless change detection.

Angular 21 made zoneless change detection the default. As a result, a new Ionic 9 application using Angular 21 or later can run without Zone.js.

This can simplify the application’s change-detection model and aligns Ionic applications with the direction of modern Angular development.

However, developers need to understand an important difference.

Without Zone.js, Angular does not automatically detect every state change originating from asynchronous operations.

For example, changes triggered by:

• setTimeout
• RxJS subscriptions
• Ionic platform events
• Overlay results
• Other asynchronous callbacks

may require developers to explicitly notify Angular.

Signals can be used for this purpose, or developers can use:

ChangeDetectorRef.markForCheck()

Angular 18 through 20 continue to use Zone.js by default, so existing applications on those versions are not automatically affected.

Developers who prefer Zone.js can also explicitly opt back into zone-based change detection on Angular 21 and later.

Angular 22 and OnPush Change Detection

Ionic 9 also accounts for changes introduced by Angular 22.

Angular 22 changes the default change-detection strategy for components that do not explicitly declare one to OnPush.

This can affect applications that modify ordinary component fields inside Ionic lifecycle hooks.

For example, code such as:

entered = 0;

ionViewWillEnter() {
  this.entered++;
}

may need to be changed when using Angular 22.

A signal-based implementation is one option:

entered = signal(0);

ionViewWillEnter() {
  this.entered.update((count) => count + 1);
}

Alternatively, developers can use ChangeDetectorRef.markForCheck() where appropriate.

Ionic’s own Angular components already use OnPush, so they are not affected by this particular change.

Standalone Components Become the Default

Ionic 9 changes the recommended Angular import paths to make standalone components the default.

For standalone applications, imports that previously used:

@ionic/angular/standalone

should now use:

@ionic/angular

Lazy-loaded components should use:

@ionic/angular/lazy

This change brings Ionic’s Angular integration more closely in line with modern Angular application architecture.

IonicModule Is Deprecated

Another important change is the deprecation of IonicModule.

IonicModule continues to work in Ionic 9, so existing applications do not need to immediately remove it.

However, Ionic plans to remove it in a future major version.

The recommended replacement is:

provideIonicAngular()

This approach works with both standalone and NgModule-based applications.

For new Angular projects, developers should generally prefer the newer provider-based approach rather than building new code around IonicModule.

TypeScript Requirements

Ionic 9 requires TypeScript 5.4 or later.

The required TypeScript version can increase depending on the Angular version being used.

According to the Ionic documentation:

Framework	TypeScript requirement
Ionic 9	TypeScript 5.4+
Angular 21	TypeScript 5.9+
Angular 22	TypeScript 6.0+

Before upgrading, check the TypeScript version used by your project and make sure it is compatible with your Angular version.

Node.js Requirements

Projects using Angular 22 need to pay particular attention to their Node.js version.

Angular 22 raises the minimum supported Node.js versions to:

^22.22.3 || ^24.15.0 || ^26.0.0

Angular 18 through 21 do not have this additional requirement.

Therefore, if you are upgrading an Ionic application to Angular 22 at the same time as Ionic 9, check your Node.js environment before starting the migration.

CSS Import Changes

Ionic 9 also removes the need for the old webpack-style ~ prefix in Ionic CSS imports.

Old:

@import '~@ionic/angular/css/core.css';

New:

@import '@ionic/angular/css/core.css';

If your project still contains CSS imports using the old syntax, update them during the migration.

React Support in Ionic 9

Ionic 9 supports React 18 and newer.

Update React with:

npm install react@latest react-dom@latest

Then update Ionic React:

npm install @ionic/react@latest @ionic/react-router@latest

Ionic 9 also improves type safety for Ionic React overlays.

Better Type Checking for useIonModal and useIonPopover

The useIonModal and useIonPopover hooks now type their componentProps based on the component being passed to them.

Previously, incorrect properties could potentially make it through because the props were less strictly typed.

With Ionic 9, TypeScript can identify incorrect or missing properties during compilation.

For example, if a modal requires:

type Props = {
  title: string;
};

then TypeScript can require the appropriate componentProps when the modal is created.

This can catch mistakes earlier instead of discovering them at runtime.

React Router 6 Is Required

Ionic React applications upgrading to Ionic 9 need to use React Router 6.

Install it with:

npm install react-router@6 react-router-dom@6

If your project has the separate type packages installed, remove them because React Router 6 includes its own TypeScript definitions:

npm uninstall @types/react-router @types/react-router-dom

This is a significant migration for projects that were previously using React Router 5.

For example, an older route may look like:

<Route path="/home" component={Home} exact />

With React Router 6:

<Route path="/home" element={<Home />} />

The Redirect component is also replaced by Navigate.

Old:

<Redirect to="/home" />

New:

<Navigate to="/home" replace />

The old useHistory hook is replaced by useNavigate.

These changes come from React Router 6 and are therefore important when upgrading an Ionic React application.

Vue Support

Ionic 9 supports Vue 3.5 and later.

Update Vue with:

npm install vue@latest

Then update Ionic Vue:

npm install @ionic/vue@latest @ionic/vue-router@latest

Vue Router 5

Ionic 9 requires Vue Router 5.

Update it using:

npm install vue-router@5

Vue Router 4 is no longer supported by @ionic/vue-router.

The good news is that Vue Router 5 is designed as a transition release and does not introduce runtime-breaking changes for Vue Router 4 consumers in the routing APIs used by Ionic.

However, Vue Router 5 introduces a deprecation warning for the callback-style next() pattern in navigation guards.

Developers should gradually move toward the return-value approach.

Capacitor 7+ Support

Ionic 9 officially supports Capacitor 7 and later.

Applications using Capacitor 2 should be upgraded.

One important change is native platform detection.

Ionic 9 no longer falls back to the old Capacitor 2 isNative flag.

Instead, Ionic relies on:

Capacitor.isNativePlatform()

Applications still using Capacitor 2 may therefore incorrectly be detected as running on the web.

If your application is using an old Capacitor version, upgrading Capacitor should be part of the migration plan.

Browser Support Changes

Ionic 9 updates its supported browser list.

The Ionic documentation recommends the following browser targets:

Chrome >=89
ChromeAndroid >=89
Firefox >=75
Edge >=89
Safari >=16
iOS >=16

If your project contains a browserslist or .browserslistrc configuration, review it and update it accordingly.

This is particularly important for applications that still support older mobile operating systems or legacy browsers.

ion-img Is Deprecated

One of the notable component-level changes in Ionic 9 is the deprecation of ion-img.

Ionic explains that ion-img was originally useful for lazy loading images before browsers provided native lazy-loading support.

Modern browsers now support:

<img loading="lazy">

As a result, Ionic recommends replacing ion-img with the native HTML <img> element.

Old:

<ion-img
  src="/assets/image.png"
  alt="Description">
</ion-img>

New:

<img
  src="/assets/image.png"
  alt="Description"
  loading="lazy"
  decoding="async">

ion-img is deprecated in Ionic 9 and is planned for removal in Ionic 10.

Developers should therefore migrate away from it rather than introducing it into new code.

Changes to ion-input

Ionic 9 changes the autocorrect property on ion-input.

It is now a boolean instead of accepting the previous 'on' | 'off' style values.

This means an older implementation such as:

<ion-input autocorrect="off"></ion-input>

can behave differently.

To explicitly enable autocorrect in Angular, use:

<ion-input [autocorrect]="true"></ion-input>

To keep autocorrect disabled, the default can be used by removing the attribute.

Ionic 9 also changes the internal DOM structure of ion-input.

Developers who use CSS selectors targeting Ionic’s internal structure should review their styles because wrappers and slots have been reorganized.

Changes to ion-searchbar

The same autocorrect change applies to ion-searchbar.

The property is now a boolean with a default value of false.

For Angular:

<ion-searchbar [autocorrect]="true"></ion-searchbar>

Developers should review existing string-based autocorrect attributes during migration.

Legacy Picker Components Removed

Ionic 9 removes the legacy picker components:

ion-picker-legacy
ion-picker-legacy-column

These should be replaced with:

ion-picker
ion-picker-column

The new picker is rendered inline rather than as an overlay.

If you want the previous overlay-style experience, Ionic recommends presenting the picker inside an ion-modal.

The old controller-based APIs are also removed, including pickerController.

React applications should also remove usages of the old useIonPicker hook and migrate to the Picker component.

Modal Handle Behavior Changed

The default handleBehavior value for ion-modal has changed from:

none

to:

cycle

This particularly affects sheet modals that display a handle.

The handle is now focusable and can be activated to cycle through the available breakpoints.

This behavior is intended to better match native iOS sheet behavior and improve accessibility.

If your application relied on the handle being inactive, explicitly set:

<ion-modal handle-behavior="none"></ion-modal>

ion-nav Router Integration Removed

Ionic 9 changes how ion-nav interacts with routing.

ion-nav no longer integrates with ion-router.

It is now an independent imperative navigation stack.

This means methods such as:

root
push
pop
setRoot

can still be used for local stack navigation.

However, applications that relied on ion-nav to update URLs through the router need to migrate to ion-router-outlet.

For URL-based navigation, use:

<ion-router-outlet></ion-router-outlet>

instead of relying on ion-nav as a routed outlet.

Improved Router Outlet Swipe Gestures

Ionic 9 introduces a swipeGesture property on ion-router-outlet.

This allows developers to control the swipe-to-go-back gesture on an individual router outlet.

For example:

<IonRouterOutlet swipeGesture={false} />

can disable the gesture for that outlet.

The default depends on the platform mode:

• iOS: true
• Material Design: false

This gives developers more granular control over navigation gestures.

ion-select Changes

Ionic 9 changes the behavior of ionChange for ion-select.

The event now fires only when the selected value actually changes.

Previously, some select interfaces could trigger ionChange when the overlay was confirmed even if the user selected the value that was already active.

If your application needs to detect overlay dismissal rather than a value change, Ionic recommends using dismissal events such as ionDismiss or the relevant didDismiss event.

Ionic 9 also updates the behavior of the selected role when using the action-sheet interface.

Changes to ion-select Styling

The internal structure of ion-select has also been reorganized.

New shadow parts include:

start
control
end

The older inner part has been removed.

Developers with custom CSS targeting Ionic shadow parts should review those selectors after upgrading.

This is especially important if your application has heavily customized ion-select components.

@ionic/core Package Exports

Ionic 9 updates the package exports for @ionic/core.

The package now declares an exports field in package.json.

This improves compatibility with modern Node.js ESM resolution and tools such as Angular’s newer build and testing tooling.

Supported entry points include:

@ionic/core
@ionic/core/components
@ionic/core/loader
@ionic/core/hydrate
@ionic/core/css/*.css

Projects using Node ESM, webpack 5, or TypeScript configurations such as bundler, node16, or nodenext should check their imports and ensure they use supported package entry points.

Who Should Upgrade to Ionic 9?

Ionic 9 is especially worth considering if your application is already using modern Angular, React, or Vue.

You should strongly consider upgrading if:

• Your project is currently on Ionic 8.
• You want to use newer Angular versions.
• You want to adopt Angular’s zoneless architecture.
• You are migrating toward standalone Angular components.
• You want better TypeScript type checking.
• You are using modern React Router.
• You want to remove deprecated Ionic APIs before future major releases.
• You need compatibility with modern browser and native-platform requirements.

However, production applications should not upgrade blindly.

Major framework upgrades can expose issues in custom CSS, routing, lifecycle behavior, third-party packages, and native integrations.

Ionic 9 Migration Checklist

Before upgrading a production application, use this checklist:

Before upgrading

• Commit your current code.
• Update Ionic 8 to the latest available version.
• Check your Angular, React, or Vue version.
• Check your TypeScript version.
• Check your Node.js version.
• Check your Capacitor version.
• Review third-party Ionic packages.
• Run your existing test suite.

During migration

• Run npx @ionic/migrate.
• Review the generated changes.
• Update framework dependencies.
• Update Ionic package imports.
• Review standalone component imports.
• Check IonicModule usage.
• Review CSS imports.
• Replace deprecated ion-img.
• Check ion-input and ion-searchbar autocorrect usage.
• Review custom CSS targeting internal Ionic DOM.
• Update legacy picker usage.
• Review routing changes.
• Check browser targets.

After migration

• Run the application locally.
• Test every major navigation flow.
• Test forms and validation.
• Test modals and popovers.
• Test select components.
• Test image loading.
• Test gestures.
• Test Android builds.
• Test iOS builds.
• Test your production build.
• Review console warnings.
• Run automated tests.

Should You Upgrade Immediately?

For a new Ionic application, using Ionic 9 is a sensible choice because it is designed around modern versions of Angular, React, and Vue.

For an existing production application, the answer depends on the project’s dependencies.

If your Ionic 8 application is stable and heavily customized, there may be little reason to rush the migration without testing. Ionic 9 contains several changes that can affect applications with custom routing, CSS, legacy components, or older native integrations.

On the other hand, projects already planning an Angular upgrade may find it efficient to migrate Ionic and Angular together.

The most important point is to treat Ionic 9 as a proper major-version migration rather than simply changing the package version.

Final Thoughts

Ionic 9 represents an important step toward a more modern Ionic development experience.

The release is particularly significant for Angular developers because it embraces standalone components and supports zoneless change detection alongside newer Angular versions.

At the same time, Ionic 9 removes or deprecates several older APIs and changes behavior in components such as ion-img, ion-input, ion-select, ion-modal, and ion-nav.

React and Vue developers also need to pay attention to ecosystem requirements, especially React Router 6 and Vue Router 5.

The safest upgrade strategy is to update dependencies systematically, run Ionic’s migration tool, review every automated change, and thoroughly test the application before deploying Ionic 9 to production.

For developers starting a new project, Ionic 9 provides a modern foundation for building cross-platform applications with web technologies while continuing Ionic’s focus on reusable UI components and native mobile experiences.

Frequently Asked Questions

What is Ionic 9?

Ionic 9 is a major release of the Ionic Framework that updates framework integrations, component behavior, package exports, browser support, and migration paths for modern Angular, React, and Vue applications.

Does Ionic 9 support Angular 22?

Yes. Ionic 9 supports Angular 18 through Angular 22.

Is IonicModule removed in Ionic 9?

No. IonicModule is deprecated but remains functional in Ionic 9. Developers are encouraged to migrate toward provideIonicAngular().

Does Ionic 9 support zoneless Angular?

Yes. Ionic 9 supports Angular’s zoneless change detection. Angular 21 and later use zoneless change detection by default in new applications.

Is ion-img removed in Ionic 9?

ion-img is deprecated in Ionic 9 and is planned for removal in Ionic 10. Developers should use a native <img> element with browser-native lazy loading instead.

What Capacitor version does Ionic 9 support?

Ionic 9 officially supports Capacitor 7 and later.

Does Ionic 9 require React Router 6?

Yes. Ionic React applications using Ionic 9 require React Router 6.

Does Ionic 9 support Vue 3?

Yes. Ionic 9 supports Vue 3.5 and later and requires Vue Router 5.

How do I migrate to Ionic 9?

Start by updating your project to the latest Ionic 8 version, commit your changes, and run:

npx @ionic/migrate

Then review the automated changes and complete any remaining manual migrations.