Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 34 additions & 1 deletion docs/updating/9-0.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,31 @@ This guide assumes that you have already updated your app to the latest version
For a **complete list of breaking changes** from Ionic 8 to Ionic 9, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md#version-9x) in the Ionic Framework repository.
:::

## Automated Migration

Before manually working through the changes below, you can run the Ionic migration tool. It scans your app, automatically applies the breaking changes that can be safely migrated, and prints a checklist of the remaining updates that require manual work. Each item includes the affected file, line number, and a link to the corresponding section of this guide. Because the tool reads your framework and version from `package.json`, it only applies migrations that are relevant to your app.

<!-- TODO(FW-7579): finalize the published command at GA (npx @ionic/migrate vs bundling into @ionic/cli). -->

:::warning
Comment thread
ShaneK marked this conversation as resolved.
Commit your work first. The tool writes changes in place and refuses to run on a dirty working tree, or a project without git, unless you pass `--force`, so git is your undo.
:::

```shell
npx @ionic/migrate
```

After a run it reinstalls dependencies to match the version bump, then prints a summary of what it fixed and what is left for you.

Useful options:

- `--dry-run` reports what would change without writing anything.
- `--check` reports only and exits non-zero if any migration is still pending, for use in CI.
- `--force` writes even if the working tree is dirty or the project is not a git repository.
- `--no-install` skips the dependency reinstall.

The tool is single-shot. Once it bumps your `@ionic/*` version, a re-run detects the new major and does nothing, so run it once per major upgrade and review the diff before committing.

## Getting Started

### Angular
Expand Down Expand Up @@ -72,12 +97,20 @@ platformBrowserDynamic()
.catch((err) => console.error(err));
```

Either way, also confirm `zone.js` is listed in the `polyfills` array in `angular.json`. Angular 21 and later default scaffolds omit it:
Either way, also confirm `zone.js` is still loaded, since Angular 21 and later default scaffolds omit it. Add it back through whichever polyfills setup your project uses.

If `angular.json` lists polyfills as an array, include `zone.js`:

```json title="angular.json"
"polyfills": ["zone.js"]
```

If your project uses a polyfills file instead (for example, Ionic starters set `"polyfills": "src/polyfills.ts"`), import it there:

```ts title="src/polyfills.ts"
import 'zone.js';
```

#### OnPush Change Detection on Angular 22

Angular 22 changes the default change detection strategy to `OnPush` for components that don't declare one. Combined with the zoneless default above, component state you mutate as a plain field from an Ionic lifecycle hook (`ionViewWillEnter`, and so on) no longer re-renders on its own.
Expand Down
Loading