Skip to content
Merged
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
36 changes: 35 additions & 1 deletion docs/updating/9-0.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,32 @@ 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.

:::warning
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 prints a summary of what it fixed and what is left for you, formats the changed files with your project's Prettier, and, if it applied anything, reinstalls dependencies so `node_modules` matches the version bump.

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-format` skips the Prettier pass over the changed files.
- `--no-install` skips the dependency reinstall.

Run `npx @ionic/migrate --help` for the full list.

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 +98,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