feat(many): upgrade to Ionic Framework v9 (#1885)

* feat(many): migrate react-vite, vue-vite, and angular starters to Ionic v9 (#1880)

* feat(react-vite): migrate starters to react router 6

* feat(vue-vite): migrate starters to ionic v9 and vue router 5

* feat(angular): migrate starters to ionic v9, angular 22, zoneless signals, and vitest

* ci: bump test matrix to node 22 for angular 22 starters

* fix(angular): capitalize sidemenu folder route so page title renders Inbox not inbox in the same way the other test apps do it

* feat(angular): update lazy and standalone import paths (#1881)

* feat(many): target @ionic/* ^9.0.0 and finalize starters for the v9 release

* refactor(angular): drop redundant provideZonelessChangeDetection from both Angular starters

---------

Co-authored-by: OS-jacobbell <228905018+OS-jacobbell@users.noreply.github.com>

Author: ShaneK

.github/workflows/main.yml

@@ -56,7 +56,9 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          # Angular 22 starters require Node ^22.22.3 || ^24.15.0 || >=26.0.0.
+          # All other current/legacy starters in this matrix run on Node 22 too.
+          node-version: 22
           cache: npm
           cache-dependency-path: |
             build/${{ matrix.framework }}/ionic.starter.json

angular-standalone/base/.eslintrc.json

@@ -1,8 +1,11 @@
 {
+  // Keeps VS Code from suggesting Ionic components off the entry points this app
+  // does not use. Patterns are matched against resolved .d.ts paths, not import
+  // specifiers, so they name @ionic/angular's actual type files. Never use a bare
+  // "@ionic/angular" here: it matches the whole package and blocks every Ionic
+  // auto-import (ionic-team/starters#1873).
   "typescript.preferences.autoImportFileExcludePatterns": [
-    "@ionic/angular/common",
-    "@ionic/angular/directives",
-    "@ionic/angular/index.d.ts",
-    "@ionic/angular/providers"
+    "@ionic/angular/types/ionic-angular-lazy.d.ts",
+    "@ionic/angular/types/ionic-angular-common.d.ts"
   ]
 }

angular-standalone/base/.vscode/settings.json

@@ -16,16 +16,14 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": {
               "base": "www",
               "browser": ""
             },
             "index": "src/index.html",
-            "polyfills": [
-              "src/polyfills.ts"
-            ],
+            "polyfills": [],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -74,7 +72,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "app:build:production"
@@ -89,32 +87,20 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "app:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "src/assets",
-                "output": "assets"
-              }
-            ],
-            "styles": ["src/global.scss", "src/theme/variables.scss"],
-            "scripts": []
+            "buildTarget": "::development",
+            "setupFiles": ["src/test-setup.ts"]
           },
           "configurations": {
             "ci": {
-              "progress": false,
               "watch": false
             }
           }

angular-standalone/base/angular.json

@@ -0,0 +1,31 @@
+// @ts-check
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+
+module.exports = tseslint.config(
+  {
+    files: ["**/*.ts"],
+    ignores: ["projects/**/*"],
+    extends: [...angular.configs.tsRecommended],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "@angular-eslint/component-class-suffix": [
+        "error",
+        { suffixes: ["Page", "Component"] },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        { type: "element", prefix: "app", style: "kebab-case" },
+      ],
+      "@angular-eslint/directive-selector": [
+        "error",
+        { type: "attribute", prefix: "app", style: "camelCase" },
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [...angular.configs.templateRecommended],
+    rules: {},
+  }
+);

angular-standalone/base/eslint.config.js

@@ -13,45 +13,28 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "20.3.25",
-    "@angular/common": "20.3.25",
-    "@angular/compiler": "20.3.25",
-    "@angular/core": "20.3.25",
-    "@angular/forms": "20.3.25",
-    "@angular/platform-browser": "20.3.25",
-    "@angular/platform-browser-dynamic": "20.3.25",
-    "@angular/router": "20.3.25",
-    "@ionic/angular": "^8.0.0",
-    "ionicons": "^7.0.0",
+    "@angular/common": "22.0.1",
+    "@angular/compiler": "22.0.1",
+    "@angular/core": "22.0.1",
+    "@angular/forms": "22.0.1",
+    "@angular/platform-browser": "22.0.1",
+    "@angular/router": "22.0.1",
+    "@ionic/angular": "^9.0.0",
+    "ionicons": "^8.1.0",
     "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.15.0"
+    "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "20.3.28",
-    "@angular-eslint/builder": "20.7.0",
-    "@angular-eslint/eslint-plugin": "20.7.0",
-    "@angular-eslint/eslint-plugin-template": "20.7.0",
-    "@angular-eslint/schematics": "20.7.0",
-    "@angular-eslint/template-parser": "20.7.0",
-    "@angular/cli": "20.3.28",
-    "@angular/compiler-cli": "20.3.25",
-    "@angular/language-service": "20.3.25",
-    "@ionic/angular-toolkit": "^12.0.0",
-    "@types/jasmine": "~5.1.0",
-    "@typescript-eslint/eslint-plugin": "^8.18.0",
-    "@typescript-eslint/parser": "^8.18.0",
+    "@angular/build": "22.0.1",
+    "@angular/cli": "22.0.1",
+    "@angular/compiler-cli": "22.0.1",
+    "@angular/language-service": "22.0.1",
+    "@ionic/angular-toolkit": "^12.3.0",
+    "angular-eslint": "22.0.0",
     "eslint": "^9.16.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsdoc": "^48.2.1",
-    "eslint-plugin-prefer-arrow": "1.2.2",
-    "jasmine-core": "~5.1.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.9.0"
+    "jsdom": "^26.0.0",
+    "typescript": "~6.0.0",
+    "typescript-eslint": "^8.61.0",
+    "vitest": "^4.0.8"
   }
 }

angular-standalone/base/karma.conf.js

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { IonApp } from '@ionic/angular/standalone';
+import { IonApp } from '@ionic/angular';
 
 @Component({
   selector: 'app-root',

angular-standalone/base/package.json

@@ -1,6 +1,6 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
-import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
+import { RouteReuseStrategy, provideRouter, withComponentInputBinding, withPreloading, PreloadAllModules } from '@angular/router';
+import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular';
 
 import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
@@ -9,6 +9,6 @@ bootstrapApplication(AppComponent, {
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     provideIonicAngular(),
-    provideRouter(routes, withPreloading(PreloadAllModules)),
+    provideRouter(routes, withPreloading(PreloadAllModules), withComponentInputBinding()),
   ],
 });