test(angular): add ng19 test app (#30041)

Issue number: internal

---------

## What is the current behavior?
There are tests apps for Angular 16, 17 and 18

## What is the new behavior?
Adds a test app for Angular 19

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

---------

Co-authored-by: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>

.github/workflows/build.yml

@@ -140,7 +140,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng16, ng17, ng18]
+        apps: [ng16, ng17, ng18, ng19]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:

.github/workflows/stencil-nightly.yml

@@ -150,7 +150,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng16, ng17, ng18]
+        apps: [ng16, ng17, ng18, ng19]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:

docs/angular/testing.md

@@ -6,11 +6,13 @@ Ionic Framework supports multiple versions of Angular. As a result, we need to v
 
 The Angular test app supports syncing your locally built changes for validation.
 
-1. Build the `core` and `packages/angular` directories using `npm run build`.
+1. Build the `core` directory.
-2. [Build the Angular test app](#test-app-build-structure).
+2. Navigate to `packages/angular` and run `npm run sync`.
-3. Navigate to the built test app directory (e.g. `packages/angular/test/build/ng14`).
+3. Build `packages/angular` using `npm run build`.
-4. Install dependencies using `npm install`.
+4. [Build the Angular test app](#test-app-build-structure).
-5. Sync your local changes using `npm run sync`.
+5. Navigate to the built test app directory (e.g. `packages/angular/test/build/ng14`).
+6. Install dependencies using `npm install`.
+7. Sync your local changes using `npm run sync`.
 
 From here you can either build the application or start a local dev server. When re-syncing changes, you will need to [wipe or disable the application cache](#application-cache).
 
@@ -86,6 +88,7 @@ As we add support for new versions of Angular, we will also need to update this
 2. Update the application by following the steps on https://update.angular.io/.
 3. Make note of any files that changed during the upgrade (`package.json`, `package-lock.json`, `angular.json`, etc).
 4. Copy the changed files to a new directory in `apps`.
+  - Do NOT copy the entire directory. The `test/base` directory contains shared files between all major versions. Only files that are different than previous major versions should be copied to the new directory in `apps`.
 5. Add a new entry to the matrix for `test-core-angular` in `./github/workflows/build.yml`. This will allow the new test app to run against all PRs.
 6. Commit these changes and push.
 

packages/angular/test/apps/ng16/package.json

@@ -41,10 +41,10 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^16.0.0",
-    "@angular-eslint/builder": "^16.0.0",
+    "@angular-eslint/builder": "^16.3.1",
-    "@angular-eslint/eslint-plugin": "^16.0.0",
+    "@angular-eslint/eslint-plugin": "^16.3.1",
-    "@angular-eslint/eslint-plugin-template": "^16.0.0",
+    "@angular-eslint/eslint-plugin-template": "^16.3.1",
-    "@angular-eslint/schematics": "^16.0.0",
+    "@angular-eslint/schematics": "^16.3.1",
     "@angular-eslint/template-parser": "^16.0.0",
     "@angular/cli": "^16.0.0",
     "@angular/compiler-cli": "^16.0.0",
@@ -52,11 +52,11 @@
     "@nguniversal/builders": "^16.0.0",
     "@types/express": "^4.17.7",
     "@types/node": "^12.12.54",
-    "@typescript-eslint/eslint-plugin": "4.28.2",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "4.28.2",
+    "@typescript-eslint/parser": "^5.62.0",
     "concurrently": "^6.0.0",
     "cypress": "^13.2.0",
-    "eslint": "^7.26.0",
+    "eslint": "^8.57.1",
     "ts-loader": "^6.2.2",
     "ts-node": "^8.3.0",
     "typescript": "~5.0.2",

packages/angular/test/apps/ng16/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts

@@ -1,10 +1,10 @@
 import { JsonPipe } from "@angular/common";
-import { Component, Input } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
 
 import { IonicModule } from "@ionic/angular";
 
 /**
- * This is used to track if any occurences of
+ * This is used to track if any occurrences of
  * the ion-nav root component being attached to
  * the DOM result in the rootParams not being
  * assigned to the component instance.
@@ -21,7 +21,7 @@ let rootParamsException = false;
   standalone: true,
   imports: [IonicModule, JsonPipe]
 })
-export class NavRootComponent {
+export class NavRootComponent implements OnInit {
 
   @Input() params: any = {};
 

packages/angular/test/apps/ng17/e2e/src/lazy/bind-component-inputs.spec.ts

@@ -1,8 +0,0 @@
-it("binding route data to inputs should work", () => {
-  cy.visit('/lazy/version-test/bind-route/test?query=test');
-
-  cy.get('#route-params').contains('test');
-  cy.get('#query-params').contains('test');
-  cy.get('#data').contains('data:bindToComponentInputs');
-  cy.get('#resolve').contains('resolve:bindToComponentInputs');
-});

packages/angular/test/apps/ng17/e2e/src/lazy/modal-nav-params.spec.ts

@@ -1,20 +0,0 @@
-describe('Modal Nav Params', () => {
-
-  beforeEach(() => {
-    cy.visit('/lazy/version-test/modal-nav-params');
-  });
-
-  it('should assign the rootParams when presented in a modal multiple times', () => {
-    cy.contains('Open Modal').click();
-    cy.get('ion-modal').should('exist').should('be.visible');
-    cy.get('ion-modal').contains('OK');
-
-    cy.contains("Close").click();
-    cy.get('ion-modal').should('not.be.visible');
-
-    cy.contains('Open Modal').click();
-    cy.get('ion-modal').should('exist').should('be.visible');
-    cy.get('ion-modal').contains('OK').should('exist');
-  });
-
-});

packages/angular/test/apps/ng17/src/app/lazy/version-test/bind-component-inputs/bind-component-inputs.component.ts

@@ -1,41 +0,0 @@
-import { Component, Input, OnInit } from "@angular/core";
-import { IonicModule } from '@ionic/angular';
-
-@Component({
-  selector: 'app-bind-route',
-  template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>bindToComponentInputs</ion-title>
-    </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <div>
-        <h3>Bind Route</h3>
-        <p id="route-params">Route params: id: {{id}}</p>
-        <p id="query-params">Query params: query: {{query}}</p>
-        <p id="data">Data: title: {{title}}</p>
-        <p id="resolve">Resolve: name: {{name}}</p>
-      </div>
-  </ion-content>
-  `,
-  standalone: true,
-  imports: [IonicModule]
-})
-export class BindComponentInputsComponent implements OnInit {
-
-  @Input() id?: string; // path parameter
-  @Input() query?: string; // query parameter
-  @Input() title?: string; // data property
-  @Input() name?: string; // resolve property
-
-  ngOnInit(): void {
-    console.log('BindComponentInputsComponent.ngOnInit', {
-      id: this.id,
-      query: this.query,
-      title: this.title,
-      name: this.name
-    });
-  }
-
-}

packages/angular/test/apps/ng17/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts

@@ -1,10 +1,10 @@
 import { JsonPipe } from "@angular/common";
-import { Component, Input } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
 
 import { IonicModule } from "@ionic/angular";
 
 /**
- * This is used to track if any occurences of
+ * This is used to track if any occurrences of
  * the ion-nav root component being attached to
  * the DOM result in the rootParams not being
  * assigned to the component instance.
@@ -21,7 +21,7 @@ let rootParamsException = false;
   standalone: true,
   imports: [IonicModule, JsonPipe]
 })
-export class NavRootComponent {
+export class NavRootComponent implements OnInit {
 
   @Input() params: any;
 

packages/angular/test/apps/ng18/e2e/src/lazy/bind-component-inputs.spec.ts

@@ -1,8 +0,0 @@
-it("binding route data to inputs should work", () => {
-  cy.visit('/lazy/version-test/bind-route/test?query=test');
-
-  cy.get('#route-params').contains('test');
-  cy.get('#query-params').contains('test');
-  cy.get('#data').contains('data:bindToComponentInputs');
-  cy.get('#resolve').contains('resolve:bindToComponentInputs');
-});

packages/angular/test/apps/ng18/e2e/src/lazy/modal-nav-params.spec.ts

@@ -1,20 +0,0 @@
-describe('Modal Nav Params', () => {
-
-  beforeEach(() => {
-    cy.visit('/lazy/version-test/modal-nav-params');
-  });
-
-  it('should assign the rootParams when presented in a modal multiple times', () => {
-    cy.contains('Open Modal').click();
-    cy.get('ion-modal').should('exist').should('be.visible');
-    cy.get('ion-modal').contains('OK');
-
-    cy.contains("Close").click();
-    cy.get('ion-modal').should('not.be.visible');
-
-    cy.contains('Open Modal').click();
-    cy.get('ion-modal').should('exist').should('be.visible');
-    cy.get('ion-modal').contains('OK').should('exist');
-  });
-
-});

packages/angular/test/apps/ng18/src/app/lazy/version-test/bind-component-inputs/bind-component-inputs.component.ts

@@ -1,41 +0,0 @@
-import { Component, Input, OnInit } from "@angular/core";
-import { IonicModule } from '@ionic/angular';
-
-@Component({
-  selector: 'app-bind-route',
-  template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>bindToComponentInputs</ion-title>
-    </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <div>
-        <h3>Bind Route</h3>
-        <p id="route-params">Route params: id: {{id}}</p>
-        <p id="query-params">Query params: query: {{query}}</p>
-        <p id="data">Data: title: {{title}}</p>
-        <p id="resolve">Resolve: name: {{name}}</p>
-      </div>
-  </ion-content>
-  `,
-  standalone: true,
-  imports: [IonicModule]
-})
-export class BindComponentInputsComponent implements OnInit {
-
-  @Input() id?: string; // path parameter
-  @Input() query?: string; // query parameter
-  @Input() title?: string; // data property
-  @Input() name?: string; // resolve property
-
-  ngOnInit(): void {
-    console.log('BindComponentInputsComponent.ngOnInit', {
-      id: this.id,
-      query: this.query,
-      title: this.title,
-      name: this.name
-    });
-  }
-
-}

packages/angular/test/apps/ng18/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts

@@ -1,10 +1,10 @@
 import { JsonPipe } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 
 import { IonicModule } from "@ionic/angular";
 
 /**
- * This is used to track if any occurences of
+ * This is used to track if any occurrences of
  * the ion-nav root component being attached to
  * the DOM result in the rootParams not being
  * assigned to the component instance.
@@ -21,7 +21,7 @@ let rootParamsException = false;
   standalone: true,
   imports: [IonicModule, JsonPipe]
 })
-export class NavRootComponent {
+export class NavRootComponent implements OnInit {
 
   params: any;
 

packages/angular/test/apps/ng19/angular.json

@@ -0,0 +1,156 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "test-app": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/test-app/browser",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "buildOptimizer": true,
+            "assets": [
+              "src/favicon.ico",
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "assets"
+              },
+              {
+                "glob": "**/*.svg",
+                "input": "node_modules/ionicons/dist/ionicons/svg",
+                "output": "./svg"
+              }
+            ],
+            "styles": ["src/styles.css"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "progress": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ]
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "buildTarget": "test-app:build"
+          },
+          "configurations": {
+            "production": {
+              "buildTarget": "test-app:build:production"
+            },
+            "development": {
+              "buildTarget": "test-app:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "test-app:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+          }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/test-app/server",
+            "main": "server.ts",
+            "tsConfig": "tsconfig.server.json"
+          },
+          "configurations": {
+            "production": {
+              "outputHashing": "media",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "sourceMap": false,
+              "optimization": true
+            }
+          }
+        },
+        "serve-ssr": {
+          "builder": "@angular-devkit/build-angular:ssr-dev-server",
+          "options": {
+            "browserTarget": "test-app:build",
+            "serverTarget": "test-app:server"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "test-app:build:production",
+              "serverTarget": "test-app:server:production"
+            }
+          }
+        },
+        "prerender": {
+          "builder": "@angular-devkit/build-angular:prerender",
+          "options": {
+            "browserTarget": "test-app:build:production",
+            "serverTarget": "test-app:server:production",
+            "routes": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "schematicCollections": ["@angular-eslint/schematics"],
+    "cache": {
+      "enabled": false
+    }
+  }
+}

packages/angular/test/apps/ng19/e2e/src/lazy/angular-version.spec.ts

@@ -0,0 +1,5 @@
+it("should be on Angular 19", () => {
+  cy.visit('/lazy');
+
+  cy.get('ion-title').contains('Angular 19');
+});

packages/angular/test/apps/ng19/e2e/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types": ["cypress", "node"]
+  },
+  "include": [
+    "../cypress/**/*.ts",
+    "../cypress/support/**/*.ts"
+  ]
+}

packages/angular/test/apps/ng19/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "ionic-angular-test-app",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "sync:build": "sh scripts/build-ionic.sh",
+    "sync": "sh scripts/sync.sh",
+    "build": "ng build --configuration production --no-progress",
+    "lint": "ng lint",
+    "serve:ssr": "node dist/test-app/server/main.js",
+    "build:ssr": "ng build --prod && ng run test-app:server:production",
+    "dev:ssr": "ng run test-app:serve-ssr",
+    "prerender": "ng run test-app:prerender",
+    "cy.open": "cypress open",
+    "cy.run": "cypress run",
+    "test": "concurrently \"npm run start -- --configuration production\" \"wait-on http-get://localhost:4200 && npm run cy.run\" --kill-others --success first",
+    "test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
+  },
+  "dependencies": {
+    "@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/platform-server": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "@angular/ssr": "^19.0.2",
+    "@ionic/angular": "^8.4.0",
+    "@ionic/angular-server": "^8.4.0",
+    "core-js": "^3.33.2",
+    "express": "^4.18.2",
+    "ionicons": "^7.2.0",
+    "rxjs": "^7.8.0",
+    "tslib": "^2.3.0",
+    "typescript-eslint-language-service": "^4.1.5",
+    "zone.js": "^0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.0.1",
+    "@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/build": "^19.0.1",
+    "@angular/cli": "^19.0.1",
+    "@angular/compiler-cli": "^19.0.0",
+    "@angular/language-service": "^19.0.0",
+    "@types/express": "^4.17.21",
+    "@types/node": "^22.9.3",
+    "@types/ws": "8.5.3",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "concurrently": "^6.0.0",
+    "cypress": "^13.16.0",
+    "eslint": "^8.57.0",
+    "ts-loader": "^6.2.2",
+    "ts-node": "^8.3.0",
+    "typescript": "^5.6.3",
+    "wait-on": "^8.0.1",
+    "webpack": "^5.61.0",
+    "webpack-cli": "^4.9.2"
+  },
+  "engines": {
+    "node": ">= 18"
+  }
+}

packages/angular/test/apps/ng19/server.ts

@@ -0,0 +1,57 @@
+import 'zone.js/dist/zone-node';
+
+import { ngExpressEngine } from '@nguniversal/express-engine';
+import * as express from 'express';
+import { join } from 'path';
+
+import { AppServerModule } from './src/main.server';
+import { APP_BASE_HREF } from '@angular/common';
+
+// The Express app is exported so that it can be used by serverless Functions.
+export function app() {
+  const server = express();
+  const distFolder = join(process.cwd(), 'dist/test-app/browser');
+
+  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
+  server.engine('html', ngExpressEngine({
+    bootstrap: AppServerModule,
+  }));
+
+  server.set('view engine', 'html');
+  server.set('views', distFolder);
+
+  // Example Express Rest API endpoints
+  // app.get('/api/**', (req, res) => { });
+  // Serve static files from /browser
+  server.get('*.*', express.static(distFolder, {
+    maxAge: '1y'
+  }));
+
+  // All regular routes use the Universal engine
+  server.get('*', (req, res) => {
+    res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
+  });
+
+  return server;
+}
+
+function run() {
+  const port = process.env.PORT || 4000;
+
+  // Start up the Node server
+  const server = app();
+  server.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+// Webpack will replace 'require' with '__webpack_require__'
+// '__non_webpack_require__' is a proxy to Node 'require'
+// The below code is to ensure that the server is run only when not requiring the bundle.
+declare const __non_webpack_require__: NodeRequire;
+const mainModule = __non_webpack_require__.main;
+if (mainModule && mainModule.filename === __filename) {
+  run();
+}
+
+export * from './src/main.server';

packages/angular/test/apps/ng19/src/app/app-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { routes } from './app.routes';
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { bindToComponentInputs: true })],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

packages/angular/test/apps/ng19/src/app/app.module.ts

@@ -0,0 +1,28 @@
+import { APP_ID, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouteReuseStrategy } from '@angular/router';
+import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+
+const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+
+export function ionicConfigFactory(): any {
+  const isLazy = isBrowser && window.location.href.includes('lazy');
+  return isLazy ? { keyboardHeight: 12345 } : {};
+}
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    IonicModule.forRoot(ionicConfigFactory()),
+  ],
+  providers: [
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+    { provide: APP_ID, useValue: 'serverApp' },
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

packages/angular/test/apps/ng19/src/app/lazy/version-test/modal-nav-params/modal-nav-params.component.ts

@@ -0,0 +1,44 @@
+import { Component } from "@angular/core";
+import { IonicModule } from "@ionic/angular";  // Only import IonicModule
+
+import { NavRootComponent } from "./nav-root.component";  // Import the NavRootComponent
+
+@Component({
+  selector: 'app-modal-nav-params',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Modal Nav Params</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-button id="open">Open Modal</ion-button>
+      <ion-modal #modal trigger="open">
+        <ng-template>
+          <ion-header>
+            <ion-toolbar>
+              <ion-buttons slot="start">
+                <ion-button (click)="modal.dismiss()">Close</ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
+            <ion-nav [root]="root" [rootParams]="rootParams"></ion-nav>
+          </ion-content>
+        </ng-template>
+      </ion-modal>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [IonicModule]  // Only import IonicModule here, remove NavRootComponent
+})
+export class ModalNavParamsComponent {
+
+  root = NavRootComponent;  // Use the root component in the ion-nav
+  rootParams = {
+    params: {
+      id: 123
+    }
+  };
+
+}

packages/angular/test/apps/ng19/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit } from "@angular/core";
+
+import { IonicModule } from "@ionic/angular";
+
+/**
+ * This is used to track if any occurrences of
+ * the ion-nav root component being attached to
+ * the DOM result in the rootParams not being
+ * assigned to the component instance.
+ *
+ * https://github.com/ionic-team/ionic-framework/issues/27146
+ */
+let rootParamsException = false;
+
+@Component({
+    selector: 'app-modal-content',
+    template: `
+    {{ hasException ? 'ERROR' : 'OK' }}
+  `,
+    imports: [IonicModule]
+})
+export class NavRootComponent implements OnInit {
+
+  params: any;
+
+  ngOnInit() {
+    if (this.params === undefined) {
+      rootParamsException = true;
+    }
+  }
+
+  get hasException() {
+    return rootParamsException;
+  }
+
+}

packages/angular/test/apps/ng19/src/app/lazy/version-test/version-test-routing.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: 'modal-nav-params',
+        loadComponent: () => import('./modal-nav-params/modal-nav-params.component').then(m => m.ModalNavParamsComponent),
+      },
+      {
+        path: 'bind-route/:id',
+        data: {
+          title: 'data:bindToComponentInputs'
+        },
+        resolve: {
+          name: () => 'resolve:bindToComponentInputs'
+        },
+        loadComponent: () => import('./bind-component-inputs/bind-component-inputs.component').then(c => c.BindComponentInputsComponent)
+      }
+    ])
+  ],
+  exports: [RouterModule]
+})
+export class VersionTestRoutingModule { }

packages/angular/test/apps/ng19/src/main.server.ts

@@ -0,0 +1,15 @@
+import { enableProdMode } from '@angular/core';
+
+import { environment } from './environments/environment';
+
+import { AppServerModule } from './app/app.server.module';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+export { AppServerModule } from './app/app.server.module';
+export { renderModule } from '@angular/platform-server';
+
+// Add a default export
+export default AppServerModule;

packages/angular/test/apps/ng19/src/server.ts

@@ -0,0 +1,65 @@
+import { APP_BASE_HREF } from '@angular/common';
+import { CommonEngine, isMainModule } from '@angular/ssr/node';
+import express from 'express';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import AppServerModule from './main.server';
+
+const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+const browserDistFolder = resolve(serverDistFolder, '../browser');
+const indexHtml = join(serverDistFolder, 'index.server.html');
+
+const app = express();
+const commonEngine = new CommonEngine();
+
+/**
+ * Example Express Rest API endpoints can be defined here.
+ * Uncomment and define endpoints as necessary.
+ *
+ * Example:
+ * ```ts
+ * app.get('/api/**', (req, res) => {
+ *   // Handle API request
+ * });
+ * ```
+ */
+
+/**
+ * Serve static files from /browser
+ */
+app.get(
+  '**',
+  express.static(browserDistFolder, {
+    maxAge: '1y',
+    index: 'index.html'
+  }),
+);
+
+/**
+ * Handle all other requests by rendering the Angular application.
+ */
+app.get('**', (req, res, next) => {
+  const { protocol, originalUrl, baseUrl, headers } = req;
+
+  commonEngine
+    .render({
+      bootstrap: AppServerModule,
+      documentFilePath: indexHtml,
+      url: `${protocol}://${headers.host}${originalUrl}`,
+      publicPath: browserDistFolder,
+      providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
+    })
+    .then((html) => res.send(html))
+    .catch((err) => next(err));
+});
+
+/**
+ * Start the server if this module is the main entry point.
+ * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
+ */
+if (isMainModule(import.meta.url)) {
+  const port = process.env['PORT'] || 4000;
+  app.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}

packages/angular/test/apps/ng19/tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

packages/angular/test/apps/ng19/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "emitDecoratorMetadata": true,
+    "typeRoots": ["node_modules/@types"],
+    "lib": ["ES2022", "dom"],
+    "plugins": [
+      {
+        "name": "typescript-eslint-language-service"
+      }
+    ],
+    "useDefineForClassFields": false
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

packages/angular/test/apps/ng19/tsconfig.server.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app-server",
+    "target": "ES2016",
+    "module": "commonjs",
+    "types": ["node"]
+  },
+  "files": [
+    "src/main.server.ts",
+    "src/server.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ],
+  "angularCompilerOptions": {
+    "entryModule": "./src/app/app.server.module#AppServerModule"
+  }
+}

packages/angular/test/apps/ng19/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "module": "commonjs",
+    "types": ["jasmine", "node"]
+  },
+  "files": [
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

packages/angular/test/base/.eslintrc.json

@@ -20,6 +20,7 @@
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {
+        "@angular-eslint/prefer-standalone": "off",
         "@angular-eslint/component-selector": [
           "error",
           {

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

@@ -7,5 +7,5 @@ import { RouterModule } from '@angular/router';
   standalone: true,
   imports: [RouterModule]
 })
-export class AppComponentStandalone {
+export class AppStandaloneComponent {
 }

packages/angular/test/base/src/app/app.component.ts

@@ -2,7 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html'
+  templateUrl: './app.component.html',
+  standalone: false
 })
 export class AppComponent {
 }

packages/angular/test/base/src/app/lazy/accordion/accordion-modal/accordion-modal.component.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-accordion-modal',
   templateUrl: './accordion-modal.component.html',
+  standalone: false
 })
 export class AccordionModalComponent {
   modal!: HTMLIonModalElement;

packages/angular/test/base/src/app/lazy/accordion/accordion.component.ts

@@ -5,6 +5,7 @@ import { AccordionModalComponent } from './accordion-modal/accordion-modal.compo
 @Component({
   selector: 'app-accordion',
   templateUrl: './accordion.component.html',
+  standalone: false
 })
 export class AccordionComponent {
 

packages/angular/test/base/src/app/lazy/alert/alert.component.ts

@@ -4,6 +4,7 @@ import { AlertController } from '@ionic/angular';
 @Component({
   selector: 'app-alert',
   templateUrl: './alert.component.html',
+  standalone: false
 })
 export class AlertComponent {
 

packages/angular/test/base/src/app/lazy/app-lazy/app.component.ts

@@ -2,7 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'app-root',
-  templateUrl: './app.component.html'
+    templateUrl: './app.component.html',
+    standalone: false
 })
 export class AppComponent {
 }

packages/angular/test/base/src/app/lazy/form-controls/range/range.component.ts

@@ -3,7 +3,8 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-range',
-  templateUrl: './range.component.html'
+  templateUrl: './range.component.html',
+  standalone: false
 })
 export class RangeComponent {
 

packages/angular/test/base/src/app/lazy/form/form.component.ts

@@ -4,6 +4,7 @@ import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl }
 @Component({
     selector: 'app-form',
     templateUrl: './form.component.html',
+    standalone: false
 })
 export class FormComponent {
 

packages/angular/test/base/src/app/lazy/home-page/home-page.component.ts

@@ -4,6 +4,7 @@ import { AnimationBuilder, AnimationController } from '@ionic/angular';
 @Component({
     selector: 'app-home-page',
     templateUrl: './home-page.component.html',
+    standalone: false
 })
 export class HomePageComponent {
 

packages/angular/test/base/src/app/lazy/inputs/inputs.component.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 @Component({
     selector: 'app-inputs',
     templateUrl: './inputs.component.html',
+    standalone: false
 })
 export class InputsComponent {
 

packages/angular/test/base/src/app/lazy/keep-contents-mounted/keep-contents-mounted-routing.module.ts

@@ -1,16 +1,16 @@
 import { NgModule } from "@angular/core";
 import { RouterModule } from "@angular/router";
-import { OverlayKeepContentsMounted } from ".";
+import { OverlayKeepContentsMountedComponent } from ".";
 
 @NgModule({
   imports: [
     RouterModule.forChild([
       {
         path: '',
-        component: OverlayKeepContentsMounted
+        component: OverlayKeepContentsMountedComponent
       }
     ])
   ],
   exports: [RouterModule]
 })
-export class OverlayKeepContentsMountedRoutingModule { }
+export class OverlayKeepContentsMountedComponentRoutingModule { }

packages/angular/test/base/src/app/lazy/keep-contents-mounted/keep-contents-mounted.component.ts

@@ -7,7 +7,8 @@ import { Component } from "@angular/core";
  */
 @Component({
   selector: 'app-keep-contents-mounted',
-  templateUrl: 'keep-contents-mounted.component.html'
+  templateUrl: 'keep-contents-mounted.component.html',
+  standalone: false
 })
-export class OverlayKeepContentsMounted {
+export class OverlayKeepContentsMountedComponent {
 }

packages/angular/test/base/src/app/lazy/keep-contents-mounted/keep-contents-mounted.module.ts

@@ -1,12 +1,12 @@
 import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 import { IonicModule } from "@ionic/angular";
-import { OverlayKeepContentsMountedRoutingModule } from "./keep-contents-mounted-routing.module";
+import { OverlayKeepContentsMountedComponentRoutingModule } from "./keep-contents-mounted-routing.module";
-import { OverlayKeepContentsMounted } from "./keep-contents-mounted.component";
+import { OverlayKeepContentsMountedComponent } from "./keep-contents-mounted.component";
 
 @NgModule({
-  imports: [CommonModule, IonicModule, OverlayKeepContentsMountedRoutingModule],
+  imports: [CommonModule, IonicModule, OverlayKeepContentsMountedComponentRoutingModule],
-  declarations: [OverlayKeepContentsMounted],
+  declarations: [OverlayKeepContentsMountedComponent],
-  exports: [OverlayKeepContentsMounted]
+  exports: [OverlayKeepContentsMountedComponent]
 })
 export class OverlayAutoMountModule { }

packages/angular/test/base/src/app/lazy/modal-example/modal-example.component.ts

@@ -5,6 +5,7 @@ import { ModalController, IonNav, ViewWillLeave, ViewDidEnter, ViewDidLeave } fr
 @Component({
     selector: 'app-modal-example',
     templateUrl: './modal-example.component.html',
+    standalone: false
 })
 export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnter, ViewWillLeave, ViewDidLeave {
 

packages/angular/test/base/src/app/lazy/modal-inline/modal-inline.component.ts

@@ -7,7 +7,8 @@ import { AfterViewInit, Component } from "@angular/core";
  */
 @Component({
   selector: 'app-modal-inline',
-  templateUrl: 'modal-inline.component.html'
+  templateUrl: 'modal-inline.component.html',
+  standalone: false
 })
 export class ModalInlineComponent implements AfterViewInit {
 

packages/angular/test/base/src/app/lazy/modal/modal.component.ts

@@ -6,6 +6,7 @@ import { NavComponent } from '../nav/nav.component';
 @Component({
     selector: 'app-modal',
     templateUrl: './modal.component.html',
+    standalone: false
 })
 export class ModalComponent {
 

packages/angular/test/base/src/app/lazy/nav/nav.component.ts

@@ -1,11 +1,12 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { ModalExampleComponent } from '../modal-example/modal-example.component';
 
 @Component({
     selector: 'app-nav',
     templateUrl: './nav.component.html',
+    standalone: false
 })
-export class NavComponent {
+export class NavComponent implements OnInit {
   rootPage = ModalExampleComponent;
   rootParams: any;
 

packages/angular/test/base/src/app/lazy/navigation-page1/navigation-page1.component.ts

@@ -5,6 +5,7 @@ let count = 0;
 @Component({
   selector: 'app-navigation-page1',
   templateUrl: './navigation-page1.component.html',
+  standalone: false
 })
 export class NavigationPage1Component {
   constructor(

packages/angular/test/base/src/app/lazy/navigation-page2/navigation-page2.component.ts

@@ -5,6 +5,7 @@ import { NavController } from '@ionic/angular';
 @Component({
   selector: 'app-navigation-page2',
   templateUrl: './navigation-page2.component.html',
+  standalone: false
 })
 export class NavigationPage2Component {
   constructor(

packages/angular/test/base/src/app/lazy/navigation-page3/navigation-page3.component.ts

@@ -4,6 +4,7 @@ import { NavController } from '@ionic/angular';
 @Component({
   selector: 'app-navigation-page3',
   templateUrl: './navigation-page3.component.html',
+  standalone: false
 })
 export class NavigationPage3Component {
   constructor(

packages/angular/test/base/src/app/lazy/nested-outlet-page/nested-outlet-page.component.ts

@@ -4,6 +4,7 @@ import { IonRouterOutlet } from '@ionic/angular';
 @Component({
     selector: 'app-nested-outlet-page',
     templateUrl: './nested-outlet-page.component.html',
+    standalone: false
 })
 export class NestedOutletPageComponent implements OnDestroy, OnInit {
   hasParentOutlet = false;

packages/angular/test/base/src/app/lazy/nested-outlet-page2/nested-outlet-page2.component.ts

@@ -3,6 +3,7 @@ import { Component, NgZone, OnDestroy, OnInit } from '@angular/core';
 @Component({
     selector: 'app-nested-outlet-page2',
     templateUrl: './nested-outlet-page2.component.html',
+    standalone: false
 })
 export class NestedOutletPage2Component implements OnDestroy, OnInit {
 

packages/angular/test/base/src/app/lazy/nested-outlet/nested-outlet.component.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 @Component({
     selector: 'app-nested-outlet',
     templateUrl: './nested-outlet.component.html',
+    standalone: false
 })
 export class NestedOutletComponent {
 

packages/angular/test/base/src/app/lazy/overlays-inline/overlays-inline.component.ts

@@ -5,7 +5,8 @@ import { Component } from "@angular/core";
  */
 @Component({
   selector: 'app-overlays-inline',
-  templateUrl: 'overlays-inline.component.html'
+  templateUrl: 'overlays-inline.component.html',
+  standalone: false
 })
 export class OverlaysInlineComponent {
   public pickerButtons = [{ text: 'Ok' }, { text: 'Cancel', role: 'cancel' }];

packages/angular/test/base/src/app/lazy/popover-inline/popover-inline.component.ts

@@ -9,7 +9,8 @@ import { IonPopover } from "@ionic/angular";
  */
 @Component({
   selector: 'app-popover-inline',
-  templateUrl: 'popover-inline.component.html'
+  templateUrl: 'popover-inline.component.html',
+  standalone: false
 })
 export class PopoverInlineComponent {
 

packages/angular/test/base/src/app/lazy/providers/providers.component.ts

@@ -17,6 +17,7 @@ import {
 @Component({
     selector: 'app-providers',
     templateUrl: './providers.component.html',
+    standalone: false
 })
 export class ProvidersComponent {
   isLoaded = false;

packages/angular/test/base/src/app/lazy/router-link-page/router-link-page.component.ts

@@ -4,6 +4,7 @@ import { IonRouterOutlet, ViewDidEnter, ViewDidLeave, ViewWillLeave } from '@ion
 @Component({
     selector: 'app-router-link-page',
     templateUrl: './router-link-page.component.html',
+    standalone: false
 })
 export class RouterLinkPageComponent implements OnInit, ViewWillLeave, ViewDidEnter, ViewWillLeave, ViewDidLeave {
 

packages/angular/test/base/src/app/lazy/router-link-page2/router-link-page2.component.ts

@@ -2,7 +2,8 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
     selector: 'app-router-link-page2',
-  templateUrl: './router-link-page2.component.html'
+    templateUrl: './router-link-page2.component.html',
+    standalone: false
 })
 export class RouterLinkPage2Component implements OnInit {
 

packages/angular/test/base/src/app/lazy/router-link-page3/router-link-page3.component.ts

@@ -2,7 +2,8 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
     selector: 'app-router-link-page3',
-  templateUrl: './router-link-page3.component.html'
+    templateUrl: './router-link-page3.component.html',
+    standalone: false
 })
 export class RouterLinkPage3Component implements OnInit {
 

packages/angular/test/base/src/app/lazy/router-link/router-link.component.ts

@@ -5,6 +5,7 @@ import { Router } from '@angular/router';
 @Component({
     selector: 'app-router-link',
     templateUrl: './router-link.component.html',
+    standalone: false
 })
 export class RouterLinkComponent implements OnInit, ViewWillEnter, ViewDidEnter, ViewWillLeave, ViewDidLeave {
 

packages/angular/test/base/src/app/lazy/searchbar/searchbar.component.ts

@@ -4,6 +4,7 @@ import { FormBuilder, Validators } from '@angular/forms';
 @Component({
   selector: 'app-searchbar',
   templateUrl: 'searchbar.component.html',
+  standalone: false
 })
 export class SearchbarComponent {
 

packages/angular/test/base/src/app/lazy/slides/slides.component.ts

@@ -4,6 +4,7 @@ import { IonSlides } from '@ionic/angular';
 @Component({
   selector: 'app-slides',
   templateUrl: './slides.component.html',
+  standalone: false
 })
 export class SlidesComponent implements AfterViewInit {
   @ViewChild(IonSlides, { static: true }) slides!: IonSlides;

packages/angular/test/base/src/app/lazy/tabs-basic/tabs-basic.component.ts

@@ -4,7 +4,8 @@ import { IonTabBar } from '@ionic/angular';
 @Component({
   selector: 'app-tabs-basic',
   templateUrl: './tabs-basic.component.html',
-  styleUrls: ['./tabs-basic.component.css']
+  styleUrls: ['./tabs-basic.component.css'],
+  standalone: false
 })
 export class TabsBasicComponent {
   constructor() { }

packages/angular/test/base/src/app/lazy/tabs-global/tabs-global.component.ts

@@ -8,7 +8,8 @@ import { NavController } from "@ionic/angular";
  */
 @Component({
   selector: 'app-tabs-global',
-  templateUrl: 'tabs-global.component.html'
+  templateUrl: 'tabs-global.component.html',
+  standalone: false
 })
 export class TabsGlobalComponent {
 

packages/angular/test/base/src/app/lazy/tabs-lazy/tabs-tab3-nested/tabs-tab3-nested.component.ts

@@ -3,5 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-tabs-tab3-nested',
   templateUrl: './tabs-tab3-nested.component.html',
+  standalone: false
 })
 export class TabsTab3NestedComponent {}

packages/angular/test/base/src/app/lazy/tabs-lazy/tabs-tab3/tabs-tab3.component.ts

@@ -3,5 +3,6 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-tabs-tab3',
   templateUrl: './tabs-tab3.component.html',
+  standalone: false
 })
 export class TabsTab3Component {}

packages/angular/test/base/src/app/lazy/tabs-tab1-nested/tabs-tab1-nested.component.ts

@@ -5,6 +5,7 @@ import { NavController } from '@ionic/angular';
 @Component({
   selector: 'app-tabs-tab1-nested',
   templateUrl: './tabs-tab1-nested.component.html',
+  standalone: false
 })
 export class TabsTab1NestedComponent implements OnInit {
   id: string | null = '';

packages/angular/test/base/src/app/lazy/tabs-tab1/tabs-tab1.component.ts

@@ -4,6 +4,7 @@ import { NavController } from '@ionic/angular';
 @Component({
   selector: 'app-tabs-tab1',
   templateUrl: './tabs-tab1.component.html',
+  standalone: false
 })
 export class TabsTab1Component {
   title = 'ERROR';

packages/angular/test/base/src/app/lazy/tabs-tab2/tabs-tab2.component.ts

@@ -3,6 +3,7 @@ import { Component, NgZone, OnInit } from '@angular/core';
 @Component({
   selector: 'app-tabs-tab2',
   templateUrl: './tabs-tab2.component.html',
+  standalone: false
 })
 export class TabsTab2Component implements OnInit {
   title = 'ERROR';

packages/angular/test/base/src/app/lazy/tabs/tabs.component.ts

@@ -4,7 +4,8 @@ import { IonTabBar } from '@ionic/angular';
 @Component({
   selector: 'app-tabs',
   templateUrl: './tabs.component.html',
-  styleUrls: ['./tabs.component.css']
+  styleUrls: ['./tabs.component.css'],
+  standalone: false
 })
 export class TabsComponent {
   tabsDidChangeCounter = 0;

packages/angular/test/base/src/app/lazy/textarea/textarea.component.ts

@@ -5,6 +5,7 @@ import { FormBuilder, Validators } from '@angular/forms';
 @Component({
   selector: 'app-textarea',
   templateUrl: 'textarea.component.html',
+  standalone: false
 })
 export class TextareaComponent {
 

packages/angular/test/base/src/app/lazy/version-test/version-test.component.ts

@@ -2,7 +2,8 @@ import { Component } from "@angular/core";
 
 @Component({
   selector: 'app-version-test',
-  templateUrl: 'version-test.component.html'
+  templateUrl: 'version-test.component.html',
+  standalone: false
 })
 export class VersionTestComponent {
 }

packages/angular/test/base/src/app/lazy/view-child/view-child.component.ts

@@ -3,7 +3,8 @@ import { IonTabs, IonButton } from '@ionic/angular';
 
 @Component({
     selector: 'app-view-child',
-  templateUrl: './view-child.component.html'
+    templateUrl: './view-child.component.html',
+    standalone: false
 })
 export class ViewChildComponent implements AfterViewInit {
   @ViewChild(IonButton, { static: true }) button!: IonButton;

packages/angular/test/base/src/main-standalone.ts

@@ -2,12 +2,12 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { RouteReuseStrategy, provideRouter } from '@angular/router';
 import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone';
 
-import { AppComponentStandalone } from './app/app-standalone.component';
+import { AppStandaloneComponent } from './app/app-standalone.component';
 
 import { routes } from './app/app.routes';
 
 export const bootstrapStandalone = () => {
-  bootstrapApplication(AppComponentStandalone, {
+  bootstrapApplication(AppStandaloneComponent, {
     providers: [
       { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
       provideRouter(routes),