chore(angular): update dependencies for v19, use latest control flow syntax and build

README.md

@@ -12,17 +12,20 @@ feature requests.
 
 ### Starters
 
-Project Type        | Description                                           | Links
---------------------|-------------------------------------------------------|-------
-**`angular`**       | Ionic Angular 4+ w/ Angular CLI for Tooling           | [base template](https://github.com/ionic-team/starters/tree/main/angular/base) / [starter templates](https://github.com/ionic-team/starters/tree/main/angular/official)
-**`ionic-angular`** | Ionic Angular 2/3 w/ `@ionic/app-scripts` for Tooling | [base template](https://github.com/ionic-team/starters/tree/main/ionic-angular/base) / [starter templates](https://github.com/ionic-team/starters/tree/main/ionic-angular/official)
-**`ionic1`**        | Ionic 1 w/ AngularJS                                  | [base template](https://github.com/ionic-team/starters/tree/main/ionic1/base) / [starter templates](https://github.com/ionic-team/starters/tree/main/ionic1/official)
-**`react`**         | React 16+ w/ react-scripts for Tooling                | [base template](https://github.com/ionic-team/starters/tree/main/react/base) / [starter templates](https://github.com/ionic-team/starters/tree/main/react/official)
-**`vue`**           | Vue 3+ w/ @vue/cli-service for Tooling                | [base template](https://github.com/ionic-team/starters/tree/main/vue/base) / [starter templates](https://github.com/ionic-team/starters/tree/main/vue/official)
+Project Type                         | Ionic Framework Version | Framework Version | Build Tool               | Template Links                                                            | Notes
+-------------------------------------|-------------------------|-------------------|--------------------------|---------------------------------------------------------------------------| ----
+**`ionic1`**                         | 1                       | AngularJS         |                          | [Base](ionic1/base) / [Starters](ionic1/official)                         | Legacy framework; supports AngularJS only.
+**`ionic-angular`**                  | 2/3                     | Angular (2+)      | `@ionic/app-scripts`     | [Base](ionic-angular/base) / [Starters](ionic-angular/official)           | Uses legacy build tool; Angular CLI unsupported.
+**`angular`**                        | 4+                      | Angular (4+)      | Angular CLI              | [Base](angular/base) / [Starters](angular/official)                       | Modern Angular CLI tooling.
+**`angular-standalone`**             | 6+                      | Angular (8+)      | Angular CLI              | [Base](angular-standalone/base) / [Starters](angular-standalone/official) | Supports standalone components introduced in Angular 8.
+**`react` (Ionic CLI v6 and below)** | 4.11+                   | React (16+)       | `react-scripts`          | [Base](react/base) / [Starters](react/official)                           | Uses Create React App; supports React Hooks.
+**`react` (Ionic CLI v7+)**          | 4.11+                   | React (17+)       | Vite (`vite`)            | [Base](react-vite/base) / [Starters](react-vite/official)                 | Vite-based tooling for modern React development.
+**`vue` (Ionic CLI v6 and below)**   | 5.4+                    | Vue (3+)          | `@vue/cli-service`       | [Base](vue/base) / [Starters](vue/official)                               | Uses Vue CLI; supports Vue Composition API.
+**`vue` (Ionic CLI v7+)**            | 5.4+                    | Vue (3+)          | Vite (`@vite/cli`)       | [Base](vue-vite/base) / [Starters](vue-vite/official)                     | Vite-based tooling for modern Vue development.
 
 ### Integrations
 
-* [Cordova](https://github.com/ionic-team/starters/tree/main/integrations/cordova)
+* [Cordova](integrations/cordova)
 
 [ionic-support]: https://ionicframework.com/support
 

angular-standalone/base/angular.json

@@ -16,12 +16,15 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "www",
+            "outputPath": {
+              "base": "www"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -32,7 +35,8 @@
               }
             ],
             "styles": ["src/global.scss", "src/theme/variables.scss"],
-            "scripts": []
+            "scripts": [],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -57,9 +61,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true

angular-standalone/base/package.json

@@ -13,35 +13,35 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.0.0",
-    "@angular/common": "^18.0.0",
-    "@angular/compiler": "^18.0.0",
-    "@angular/core": "^18.0.0",
-    "@angular/forms": "^18.0.0",
-    "@angular/platform-browser": "^18.0.0",
-    "@angular/platform-browser-dynamic": "^18.0.0",
-    "@angular/router": "^18.0.0",
+    "@angular/animations": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
     "@ionic/angular": "^8.0.0",
-    "ionicons": "^7.2.1",
+    "ionicons": "^7.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.2"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.0",
-    "@angular-eslint/builder": "^18.0.0",
-    "@angular-eslint/eslint-plugin": "^18.0.0",
-    "@angular-eslint/eslint-plugin-template": "^18.0.0",
-    "@angular-eslint/schematics": "^18.0.0",
-    "@angular-eslint/template-parser": "^18.0.0",
-    "@angular/cli": "^18.0.0",
-    "@angular/compiler-cli": "^18.0.0",
-    "@angular/language-service": "^18.0.0",
-    "@ionic/angular-toolkit": "^11.0.1",
+    "@angular-devkit/build-angular": "^19.0.0",
+    "@angular-eslint/builder": "^19.0.0",
+    "@angular-eslint/eslint-plugin": "^19.0.0",
+    "@angular-eslint/eslint-plugin-template": "^19.0.0",
+    "@angular-eslint/schematics": "^19.0.0",
+    "@angular-eslint/template-parser": "^19.0.0",
+    "@angular/cli": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
+    "@angular/language-service": "^19.0.0",
+    "@ionic/angular-toolkit": "^12.0.0",
     "@types/jasmine": "~5.1.0",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "eslint": "^8.57.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.0",
+    "@typescript-eslint/parser": "^8.18.0",
+    "eslint": "^9.16.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsdoc": "^48.2.1",
     "eslint-plugin-prefer-arrow": "1.2.2",
@@ -52,6 +52,6 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.4.0"
+    "typescript": "~5.6.3"
   }
 }

angular-standalone/base/src/app/app.component.ts

@@ -5,7 +5,6 @@ import { IonApp } from '@ionic/angular/standalone';
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.scss'],
-  standalone: true,
   imports: [IonApp],
 })
 export class AppComponent {

angular-standalone/base/tsconfig.json

@@ -5,14 +5,14 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,

angular-standalone/official/blank/src/app/app.component.ts

@@ -4,7 +4,6 @@ import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
-  standalone: true,
   imports: [IonApp, IonRouterOutlet],
 })
 export class AppComponent {

angular-standalone/official/blank/src/app/home/home.page.ts

@@ -5,7 +5,6 @@ import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/stan
   selector: 'app-home',
   templateUrl: 'home.page.html',
   styleUrls: ['home.page.scss'],
-  standalone: true,
   imports: [IonHeader, IonToolbar, IonTitle, IonContent],
 })
 export class HomePage {

angular-standalone/official/list/src/app/app.component.ts

@@ -4,7 +4,6 @@ import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
-  standalone: true,
   imports: [IonApp, IonRouterOutlet],
 })
 export class AppComponent {

angular-standalone/official/list/src/app/home/home.page.html

@@ -10,16 +10,18 @@
   <ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
     <ion-refresher-content></ion-refresher-content>
   </ion-refresher>
-  
+
   <ion-header collapse="condense">
     <ion-toolbar>
       <ion-title size="large">
         Inbox
       </ion-title>
     </ion-toolbar>
   </ion-header>
-  
+
   <ion-list>
-    <app-message *ngFor="let message of getMessages()" [message]="message"></app-message>
+    @for (message of getMessages(); track message) {
+      <app-message [message]="message"></app-message>
+    }
   </ion-list>
-</ion-content>
+</ion-content>

angular-standalone/official/list/src/app/home/home.page.ts

@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+
 import { Component, inject } from '@angular/core';
 import { RefresherCustomEvent, IonHeader, IonToolbar, IonTitle, IonContent, IonRefresher, IonRefresherContent, IonList } from '@ionic/angular/standalone';
 import { MessageComponent } from '../message/message.component';
@@ -9,8 +9,7 @@ import { DataService, Message } from '../services/data.service';
   selector: 'app-home',
   templateUrl: 'home.page.html',
   styleUrls: ['home.page.scss'],
-  standalone: true,
-  imports: [CommonModule, IonHeader, IonToolbar, IonTitle, IonContent, IonRefresher, IonRefresherContent, IonList, MessageComponent],
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonRefresher, IonRefresherContent, IonList, MessageComponent],
 })
 export class HomePage {
   private data = inject(DataService);

angular-standalone/official/list/src/app/message/message.component.html

@@ -1,31 +1,33 @@
-<ion-item
-  *ngIf="message"
-  [routerLink]="'/message/' + message.id"
-  [detail]="false"
->
-  <div slot="start" [class]="!message.read ? 'dot dot-unread' : 'dot'"></div>
-  <ion-label class="ion-text-wrap">
-    <h2>
-      {{ message.fromName }}
-      <span class="date">
-        <ion-note>{{ message.date }}</ion-note>
-        <ion-icon
-          aria-hidden="true"
-          name="chevron-forward"
-          size="small"
-          *ngIf="isIos()"
-        ></ion-icon>
-      </span>
-    </h2>
-    <h3>{{ message.subject }}</h3>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-      est laborum.
-    </p>
-  </ion-label>
-</ion-item>
+@if (message) {
+  <ion-item
+    [routerLink]="'/message/' + message.id"
+    [detail]="false"
+    >
+    <div slot="start" [class]="!message.read ? 'dot dot-unread' : 'dot'"></div>
+    <ion-label class="ion-text-wrap">
+      <h2>
+        {{ message.fromName }}
+        <span class="date">
+          <ion-note>{{ message.date }}</ion-note>
+          @if (isIos()) {
+            <ion-icon
+              aria-hidden="true"
+              name="chevron-forward"
+              size="small"
+            ></ion-icon>
+          }
+        </span>
+      </h2>
+      <h3>{{ message.subject }}</h3>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+        est laborum.
+      </p>
+    </ion-label>
+  </ion-item>
+}

angular-standalone/official/list/src/app/message/message.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+
 import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { Platform, IonItem, IonLabel, IonNote, IonIcon } from '@ionic/angular/standalone';
@@ -11,8 +11,7 @@ import { Message } from '../services/data.service';
   templateUrl: './message.component.html',
   styleUrls: ['./message.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [CommonModule, RouterLink, IonItem, IonLabel, IonNote, IonIcon],
+  imports: [RouterLink, IonItem, IonLabel, IonNote, IonIcon],
 })
 export class MessageComponent {
   private platform = inject(Platform);

angular-standalone/official/list/src/app/view-message/view-message.page.html

@@ -9,34 +9,35 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true" *ngIf="message">
-  <ion-item>
-    <ion-icon
-      aria-hidden="true"
-      name="person-circle"
-      color="primary"
-    ></ion-icon>
-    <ion-label class="ion-text-wrap">
-      <h2>
-        {{ message.fromName }}
-        <span class="date">
-          <ion-note>{{ message.date }}</ion-note>
-        </span>
-      </h2>
-      <h3>To: <ion-note>Me</ion-note></h3>
-    </ion-label>
-  </ion-item>
-
-  <div class="ion-padding">
-    <h1>{{ message.subject }}</h1>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-      est laborum.
-    </p>
-  </div>
-</ion-content>
+@if (message) {
+  <ion-content [fullscreen]="true">
+    <ion-item>
+      <ion-icon
+        aria-hidden="true"
+        name="person-circle"
+        color="primary"
+      ></ion-icon>
+      <ion-label class="ion-text-wrap">
+        <h2>
+          {{ message.fromName }}
+          <span class="date">
+            <ion-note>{{ message.date }}</ion-note>
+          </span>
+        </h2>
+        <h3>To: <ion-note>Me</ion-note></h3>
+      </ion-label>
+    </ion-item>
+    <div class="ion-padding">
+      <h1>{{ message.subject }}</h1>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+        est laborum.
+      </p>
+    </div>
+  </ion-content>
+}

angular-standalone/official/list/src/app/view-message/view-message.page.ts

@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+
 import { Component, inject, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Platform, IonHeader, IonToolbar, IonButtons, IonBackButton, IonContent, IonItem, IonIcon, IonLabel, IonNote } from '@ionic/angular/standalone';
@@ -10,8 +10,7 @@ import { DataService, Message } from '../services/data.service';
   selector: 'app-view-message',
   templateUrl: './view-message.page.html',
   styleUrls: ['./view-message.page.scss'],
-  standalone: true,
-  imports: [CommonModule, IonHeader, IonToolbar, IonButtons, IonBackButton, IonContent, IonItem, IonIcon, IonLabel, IonNote],
+  imports: [IonHeader, IonToolbar, IonButtons, IonBackButton, IonContent, IonItem, IonIcon, IonLabel, IonNote],
 })
 export class ViewMessagePage implements OnInit {
   public message!: Message;