diff --git a/docs/updating/9-0.md b/docs/updating/9-0.md index 37e18ebd30..b3c88cb657 100644 --- a/docs/updating/9-0.md +++ b/docs/updating/9-0.md @@ -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. + + + +:::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 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 @@ -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.