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>

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

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html'
+    selector: 'app-root',
+    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

@@ -2,8 +2,9 @@ import { Component } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
 
 @Component({
-  selector: 'app-form',
-  templateUrl: './form.component.html',
+    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

@@ -2,8 +2,9 @@ import { Component, VERSION } from '@angular/core';
 import { AnimationBuilder, AnimationController } from '@ionic/angular';
 
 @Component({
-  selector: 'app-home-page',
-  templateUrl: './home-page.component.html',
+    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

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-inputs',
-  templateUrl: './inputs.component.html',
+    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 { OverlayKeepContentsMounted } from "./keep-contents-mounted.component";
+import { OverlayKeepContentsMountedComponentRoutingModule } from "./keep-contents-mounted-routing.module";
+import { OverlayKeepContentsMountedComponent } from "./keep-contents-mounted.component";
 
 @NgModule({
-  imports: [CommonModule, IonicModule, OverlayKeepContentsMountedRoutingModule],
-  declarations: [OverlayKeepContentsMounted],
-  exports: [OverlayKeepContentsMounted]
+  imports: [CommonModule, IonicModule, OverlayKeepContentsMountedComponentRoutingModule],
+  declarations: [OverlayKeepContentsMountedComponent],
+  exports: [OverlayKeepContentsMountedComponent]
 })
 export class OverlayAutoMountModule { }

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

@@ -3,8 +3,9 @@ import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { ModalController, IonNav, ViewWillLeave, ViewDidEnter, ViewDidLeave } from '@ionic/angular';
 
 @Component({
-  selector: 'app-modal-example',
-  templateUrl: './modal-example.component.html',
+    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

@@ -4,8 +4,9 @@ import { ModalExampleComponent } from '../modal-example/modal-example.component'
 import { NavComponent } from '../nav/nav.component';
 
 @Component({
-  selector: 'app-modal',
-  templateUrl: './modal.component.html',
+    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',
+    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

@@ -2,8 +2,9 @@ import { Component, NgZone, OnDestroy, OnInit } from '@angular/core';
 import { IonRouterOutlet } from '@ionic/angular';
 
 @Component({
-  selector: 'app-nested-outlet-page',
-  templateUrl: './nested-outlet-page.component.html',
+    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

@@ -1,8 +1,9 @@
 import { Component, NgZone, OnDestroy, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-nested-outlet-page2',
-  templateUrl: './nested-outlet-page2.component.html',
+    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

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-nested-outlet',
-  templateUrl: './nested-outlet.component.html',
+    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

@@ -15,8 +15,9 @@ import {
 } from '@ionic/angular';
 
 @Component({
-  selector: 'app-providers',
-  templateUrl: './providers.component.html',
+    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

@@ -2,8 +2,9 @@ import { Component, OnInit, NgZone } from '@angular/core';
 import { IonRouterOutlet, ViewDidEnter, ViewDidLeave, ViewWillLeave } from '@ionic/angular';
 
 @Component({
-  selector: 'app-router-link-page',
-  templateUrl: './router-link-page.component.html',
+    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

@@ -1,8 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-router-link-page2',
-  templateUrl: './router-link-page2.component.html'
+    selector: 'app-router-link-page2',
+    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

@@ -1,8 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-router-link-page3',
-  templateUrl: './router-link-page3.component.html'
+    selector: 'app-router-link-page3',
+    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

@@ -3,8 +3,9 @@ import { NavController, ViewDidEnter, ViewDidLeave, ViewWillEnter, ViewWillLeave
 import { Router } from '@angular/router';
 
 @Component({
-  selector: 'app-router-link',
-  templateUrl: './router-link.component.html',
+    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 {
 
@@ -13,4 +14,4 @@ export class SearchbarComponent {
 
   constructor(private fb: FormBuilder) { }
 
-}
+}

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/bind-component-inputs/bind-component-inputs.component.ts

@@ -0,0 +1,41 @@
+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/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

@@ -2,8 +2,9 @@ import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
 import { IonTabs, IonButton } from '@ionic/angular';
 
 @Component({
-  selector: 'app-view-child',
-  templateUrl: './view-child.component.html'
+    selector: 'app-view-child',
+    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),