Skip to content

Commit bd21e00

Browse files
feat(angular): support Angular 22 (#31205)
Issue number: resolves #31204 --------- ## What is the current behavior? Currently, `@ionic/angular` on `major-9.0` supports Angular 18 through 21 and TypeScript 5.4 through 5.9. The library and `@ionic/angular-server` don't build under Angular 22 / ng-packagr 22 / TypeScript 6.0. TS 6.0 surfaces latent `tsconfig` problems (a `baseUrl` the schematics build relied on, and `types` now defaulting to `[]`), and Angular 22's `typeCheckHostBindings` rejects the `$event.target` host bindings in `ion-tabs` and the multi-element value accessors. The package also still lints with ESLint 8 and the legacy `.eslintrc.json` ## What is the new behavior? This extends the supported Angular range to 18 through 22 and upgrades TypeScript to v6.0. A new `ng22` test app is added, mirroring `ng21` (zoneless), so the automated test matrix covers v18-22 end to end The package's ESLint setup is migrated to the v9 flat config, which was required by the upgrade to `angular-eslint@22` Several shared test pages under `test/base/` were modernized to signals (router-link, checkbox, the value-accessor display, and the lazy modal example). Angular 22 defaults components without an explicit strategy to `OnPush`, so plain-field state mutated from an Ionic lifecycle hook no longer re-renders on its own in the test app ## Does this introduce a breaking change? - [X] Yes - [ ] No Apps moving to Angular 22 inherit three Angular 22 requirements, all documented in BREAKING.md: components without an explicit change detection strategy default to `OnPush` (run `ng update` to migrate to eager, or use a signal / `markForCheck()` for state set in lifecycle hooks), TypeScript 6.0 or later is required, and the minimum Node.js version rises to `^22.22.3 || ^24.15.0 || ^26.0.0`. Angular 18 through 21 are unaffected ## Other information Angular 22's CLI hard-blocks Node below `^24.15.0` / `^22.22.3` / `>=26`, so local `ng serve` / `ng test` of the `ng22` app needs a Node version in that range --------- ## Current dev build (2026-06-10): ``` 8.8.9-dev.11781098612.122c6758 ``` Angular 22 test app: https://ionic-framework-git-feat-ng22-ionic1.vercel.app/angular/ Docs PR: ionic-team/ionic-docs#4549 Docs Preview: https://ionic-docs-git-feat-ng22-ionic1.vercel.app/docs/updating/9-0#angular --------- Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
1 parent 9d9a1cc commit bd21e00

66 files changed

Lines changed: 18878 additions & 1932 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.github/workflows/build.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ jobs:
140140
strategy:
141141
fail-fast: false
142142
matrix:
143-
apps: [ng18, ng19, ng20, ng21]
143+
apps: [ng18, ng19, ng20, ng21, ng22]
144144
needs: [build-angular, build-angular-server]
145145
runs-on: ubuntu-latest
146146
steps:

.github/workflows/stencil-nightly.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ jobs:
157157
strategy:
158158
fail-fast: false
159159
matrix:
160-
apps: [ng18, ng19, ng20, ng21]
160+
apps: [ng18, ng19, ng20, ng21, ng22]
161161
needs: [build-angular, build-angular-server]
162162
runs-on: ubuntu-latest
163163
steps:

BREAKING.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,9 +175,17 @@ Angular forbids `provideZoneChangeDetection()` inside an NgModule's `providers`
175175
import 'zone.js';
176176
```
177177

178+
**OnPush by Default on Angular 22**
179+
180+
Angular 22 changes the default change detection strategy to `OnPush` for components that don't declare one. Combined with the zoneless default above, any component state that you mutate as a plain field from an Ionic lifecycle hook (`ionViewWillEnter`, etc.) no longer re-renders on its own. Run `ng update`, which migrates existing components to eager change detection and preserves the previous behavior, or use a signal (or `ChangeDetectorRef.markForCheck()`) for state set in those hooks. Ionic's own Angular components already declare `OnPush` explicitly and are unaffected. Angular 18 through 21 keep the eager default, so they require no change.
181+
178182
**TypeScript**
179183

180-
Ionic 9 supports TypeScript 5.4 or later, matching the minimum for Angular 18. Angular 21 requires TypeScript 5.9 or later per Angular's own requirements.
184+
Ionic 9 supports TypeScript 5.4 or later, matching the minimum for Angular 18. Angular 21 requires TypeScript 5.9 or later, and Angular 22 requires TypeScript 6.0 or later, per Angular's own requirements.
185+
186+
**Node.js**
187+
188+
Angular 22 raises the minimum Node.js version to `^22.22.3 || ^24.15.0 || ^26.0.0`. Angular 18 through 21 are unaffected.
181189

182190
**Module Resolution**
183191

0 commit comments

Comments
 (0)