Skip to content

Angular 22, Ionic 8.8, Capacitor 8, Node 24 — signals + zoneless-safe

Choose a tag to compare

View all tags
@uatisdeproblem uatisdeproblem released this 29 Jun 16:30
v8.12.0
8df0622

Versioning note — why this is a minor, not a major.
This release is a large framework jump (Angular 20 → 22, Capacitor 7 → 8, Node 22 → 24) yet it ships as 8.10.x → 8.12.0, a minor bump. The major version of @idea-ionic/* is intentionally kept in lockstep with Ionic's major — today Ionic 8 — so the packages stay on v8. We will only move to v9 when Ionic 9 lands. The breaking changes below are therefore delivered in a minor and documented in detail so consumers can upgrade safely.

⚠️ Breaking changes

  • Toolchain. The packages now require Angular ^22, @ionic/angular ^8.8.11, Capacitor ^8, TypeScript >=6.0 (Angular 22 today requires: >=6.0 <6.1) and Node >=24.15. Consuming apps must upgrade their stack first — follow the upgrade guide (replace with the public share link).

  • All modules. zone.js is no longer a peer dependency. The libraries are now OnPush + signals/markForCheck (zoneless-safe), so they no longer declare zone.js.

    • Apps still on Zone.js are unaffected — keep zone.js in your own package.json (you already do; Angular/Ionic still pull it).
    • Apps going zoneless no longer get the spurious peer-dependency warning.

  • All modules. Component inputs/outputs are now signals. This is transparent for template usage — [input]="…", (output)="…" and two-way [(model)]="…" keep working unchanged. It is only breaking for programmatic access to an @idea-ionic component instance (e.g. via @ViewChild):

    // before
this.list.data = items;          // set
const n = this.list.disabled;    // read

// after  (data/disabled are signals now)
this.listRef.setInput('data', items);   // set on the ComponentRef
const n = this.list.disabled();         // read (call the signal)

    Outputs are unchanged in practice — output() still exposes .subscribe() / .emit().

  • All modules. If your applications keep zone.js, you need to import a custom change-detection bridge (if your app is zoneless, skip it), or some pages will open blank or stay on their skeletons. Add thisone line in the app bootstrap:

    import { provideIDEAChangeDetectionBridge } from '@idea-ionic/common';

bootstrapApplication(AppComponent, {
  providers: [
    // …
    provideIDEAChangeDetectionBridge()
  ]
});

🚀 Improvements

  • All modules. Migrated to signals (input() / output() / model() / viewChild()) with OnPush change detection on every component, hardened to be zoneless-safe (markForCheck() after awaited state writes, reactive darkMode/windowWidth, etc.). The libraries work identically under Zone and zoneless consumers — they never call provideZonelessChangeDetection() themselves, so your app decides.
    • Inputs that a component reassigns internally (and the few accessor/setter inputs) intentionally remain @Input() — no consumer impact.
  • All modules. Strict template type-checking (strictTemplates, the Angular 22 default) is now on.
  • Dependencies advanced. signature_pad → ^5.1.3, @kolkov/angular-editor → stable ^3.0.5, plus the Capacitor 8 plugin family (@capacitor/core ^8.4.1, browser, camera, network, push-notifications) and @capacitor-mlkit/barcode-scanning ^8.1.0.
  • Common. App Status - Remote status file. IDEAAppStatusService.statusFileURL now honors env.idea.app.statusFileURL, so apps (incl. Capacitor native) can point at a single remote status.json and control maintenance / minVersion / messages from one place. Unset ⇒ unchanged behavior. More on App Status._
idea: { 
  app: { 
    // it's important that the domain is NOT the same used by the native app/Capacitor, 
    // otherwise the native package will read the local version of the file (so changes via web are not received)
    statusFileURL: "https://<host>/status.json"
    // example (a direct bucket REST link, if accessible, is also fine)
    // statusFileURL: "https://idea-papaya-prod-front-end.s3.eu-south-1.amazonaws.com/assets/status.json"
  } 
}

📚 References

Previous compatible lines: last Angular 20 / Ionic 8.6 release is v8.10.1.

Assets 2
Loading