feat(angular): ship Ionic components as Angular standalone components (#28311)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

**1. Bundle Size Reductions**

All Ionic UI components and Ionicons are added to the final bundle of an
Ionic Angular application. This is because all components and icons are
lazily loaded as needed. This prevents the compiler from properly tree
shaking applications. This does not cause all components and icons to be
loaded on application start, but it does increase the size of the final
app output that all users need to download.

**Related Issues**

https://github.com/ionic-team/ionicons/issues/910

https://github.com/ionic-team/ionicons/issues/536

https://github.com/ionic-team/ionic-framework/issues/27280

https://github.com/ionic-team/ionic-framework/issues/24352

**2. Standalone Component Support**

Standalone Components are a stable API as of Angular 15. The Ionic
starter apps on the CLI have NgModule and Standalone options, but all of
the Ionic components are still lazily/dynamically loaded using
`IonicModule`. Standalone components in Ionic also enable support for
new Angular features such as bundling with ESBuild instead of Webpack.
ESBuild does not work in Ionic Angular right now because components
cannot be statically analyzed since they are dynamically imported.

We added preliminary support for standalone components in Ionic v6.3.0.
This enabled developers to use their own custom standalone components
when routing with `ion-router-outlet`. However, we did not ship
standalone components for Ionic's UI components.

**Related Issues**

https://github.com/ionic-team/ionic-framework/issues/25404

https://github.com/ionic-team/ionic-framework/issues/27251

https://github.com/ionic-team/ionic-framework/issues/27387

**3. Faster Component Load Times**

Since Ionic Angular components are lazily loaded, they also need to be
hydrated. However, this hydration does not happen immediately which
prevents components from being usable for multiple frames.

**Related Issues**

https://github.com/ionic-team/ionic-framework/issues/24352

https://github.com/ionic-team/ionic-framework/issues/26474

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Ionic components and directives are accessible as Angular standalone
components/directives

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Associated documentation branch:
https://github.com/ionic-team/ionic-docs/tree/feature-7.5

---------

Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Sean Perkins <sean@ionic.io>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Co-authored-by: Maria Hutt <maria@ionic.io>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  standalone: true,
+  imports: [RouterModule]
+})
+export class AppComponentStandalone {
+}

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

@@ -1,3 +1 @@
-<ion-app>
-  <ion-router-outlet></ion-router-outlet>
-</ion-app>
+<router-outlet></router-outlet>

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

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

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

@@ -1,66 +1,27 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
 import { RouteReuseStrategy } from '@angular/router';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
-import { FormsModule } from '@angular/forms';
-import { InputsComponent } from './inputs/inputs.component';
-import { ModalComponent } from './modal/modal.component';
-import { ModalExampleComponent } from './modal-example/modal-example.component';
-import { RouterLinkComponent } from './router-link/router-link.component';
-import { RouterLinkPageComponent } from './router-link-page/router-link-page.component';
-import { RouterLinkPage2Component } from './router-link-page2/router-link-page2.component';
-import { RouterLinkPage3Component } from './router-link-page3/router-link-page3.component';
-import { HomePageComponent } from './home-page/home-page.component';
-import { NestedOutletComponent } from './nested-outlet/nested-outlet.component';
-import { NestedOutletPageComponent } from './nested-outlet-page/nested-outlet-page.component';
-import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-page2.component';
-import { NavComponent } from './nav/nav.component';
-import { ViewChildComponent } from './view-child/view-child.component';
-import { ProvidersComponent } from './providers/providers.component';
-import { FormComponent } from './form/form.component';
-import { NavigationPage1Component } from './navigation-page1/navigation-page1.component';
-import { NavigationPage2Component } from './navigation-page2/navigation-page2.component';
-import { NavigationPage3Component } from './navigation-page3/navigation-page3.component';
-import { AlertComponent } from './alert/alert.component';
-import { AccordionComponent } from './accordion/accordion.component';
-import { AccordionModalComponent } from './accordion/accordion-modal/accordion-modal.component';
+
+const isLazy = window.location.href.includes('lazy');
+
+const imports = [
+  BrowserModule.withServerTransition({ appId: 'serverApp' }),
+  AppRoutingModule,
+];
+
+if (isLazy) {
+  imports.push(IonicModule.forRoot({ keyboardHeight: 12345 }));
+}
 
 @NgModule({
   declarations: [
     AppComponent,
-    InputsComponent,
-    ModalComponent,
-    ModalExampleComponent,
-    RouterLinkComponent,
-    RouterLinkPageComponent,
-    RouterLinkPage2Component,
-    RouterLinkPage3Component,
-    HomePageComponent,
-    NestedOutletComponent,
-    NestedOutletPageComponent,
-    NestedOutletPage2Component,
-    NavComponent,
-    ViewChildComponent,
-    ProvidersComponent,
-    FormComponent,
-    NavigationPage1Component,
-    NavigationPage2Component,
-    NavigationPage3Component,
-    AlertComponent,
-    AccordionComponent,
-    AccordionModalComponent
-  ],
-  imports: [
-    BrowserModule.withServerTransition({ appId: 'serverApp' }),
-    AppRoutingModule,
-    FormsModule,
-    ReactiveFormsModule,
-    IonicModule.forRoot({ keyboardHeight: 12345 }),
   ],
+  imports,
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
   ],

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

@@ -1,82 +1,16 @@
 import { Routes } from '@angular/router';
-import { InputsComponent } from './inputs/inputs.component';
-import { ModalComponent } from './modal/modal.component';
-import { RouterLinkComponent } from './router-link/router-link.component';
-import { RouterLinkPageComponent } from './router-link-page/router-link-page.component';
-import { RouterLinkPage2Component } from './router-link-page2/router-link-page2.component';
-import { RouterLinkPage3Component } from './router-link-page3/router-link-page3.component';
-import { HomePageComponent } from './home-page/home-page.component';
-import { NestedOutletComponent } from './nested-outlet/nested-outlet.component';
-import { NestedOutletPageComponent } from './nested-outlet-page/nested-outlet-page.component';
-import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-page2.component';
-import { ViewChildComponent } from './view-child/view-child.component';
-import { ProvidersComponent } from './providers/providers.component';
-import { FormComponent } from './form/form.component';
-import { NavigationPage1Component } from './navigation-page1/navigation-page1.component';
-import { NavigationPage2Component } from './navigation-page2/navigation-page2.component';
-import { NavigationPage3Component } from './navigation-page3/navigation-page3.component';
-import { AlertComponent } from './alert/alert.component';
-import { AccordionComponent } from './accordion/accordion.component';
 
 export const routes: Routes = [
-  { path: '', component: HomePageComponent },
-  { path: 'version-test', loadChildren: () => import('./version-test').then(m => m.VersionTestModule) },
-  { path: 'accordions', component: AccordionComponent },
-  { path: 'alerts', component: AlertComponent },
-  { path: 'inputs', component: InputsComponent },
-  { path: 'textarea', loadChildren: () => import('./textarea/textarea.module').then(m => m.TextareaModule) },
-  { path: 'searchbar', loadChildren: () => import('./searchbar/searchbar.module').then(m => m.SearchbarModule) },
-  { path: 'form', component: FormComponent },
-  { path: 'modals', component: ModalComponent },
-  { path: 'modal-inline', loadChildren: () => import('./modal-inline').then(m => m.ModalInlineModule) },
-  { path: 'view-child', component: ViewChildComponent },
-  { path: 'keep-contents-mounted', loadChildren: () => import('./keep-contents-mounted').then(m => m.OverlayAutoMountModule) },
-  { path: 'overlays-inline', loadChildren: () => import('./overlays-inline').then(m => m.OverlaysInlineModule) },
-  { path: 'popover-inline', loadChildren: () => import('./popover-inline').then(m => m.PopoverInlineModule) },
-  { path: 'providers', component: ProvidersComponent },
-  { path: 'router-link', component: RouterLinkComponent },
-  { path: 'router-link-page', component: RouterLinkPageComponent },
-  { path: 'router-link-page2/:id', component: RouterLinkPage2Component },
-  { path: 'router-link-page3', component: RouterLinkPage3Component },
-  { path: 'standalone', loadComponent: () => import('./standalone/standalone.component').then(c => c.StandaloneComponent) },
-  { path: 'tabs', redirectTo: '/tabs/account', pathMatch: 'full' },
   {
-    path: 'navigation',
-    children: [
-      { path: 'page1', component: NavigationPage1Component },
-      { path: 'page2', component: NavigationPage2Component },
-      { path: 'page3', component: NavigationPage3Component }
-    ]
+    path: '',
+    pathMatch: 'full',
+    /**
+     * Omit the slash at the beginning
+     * so query params are preserved.
+     * https://github.com/angular/angular/issues/13315#issuecomment-427254639
+     */
+    redirectTo: 'lazy'
   },
-  {
-    path: 'tabs',
-    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
-  },
-  {
-    path: 'tabs-global',
-    loadChildren: () => import('./tabs-global/tabs-global.module').then(m => m.TabsGlobalModule)
-  },
-  {
-    path: 'tabs-slots',
-    loadComponent: () => import('./tabs-slots.component').then(c => c.TabsSlotsComponent)
-  },
-  {
-    path: 'nested-outlet',
-    component: NestedOutletComponent,
-    children: [
-      {
-        path: 'page',
-        component: NestedOutletPageComponent
-      },
-      {
-        path: 'page2',
-        component: NestedOutletPage2Component
-      }
-    ]
-  },
-  {
-    path: 'form-controls/range',
-    loadChildren: () => import('./form-controls/range/range.module').then(m => m.RangeModule)
-  }
+  { path: 'lazy', loadChildren: () => import('./lazy/app-lazy/app.module').then(m => m.AppModule) },
+  { path: 'standalone', loadChildren: () => import('./standalone/app-standalone/app.routes').then(m => m.routes) }
 ];
-

packages/angular/test/base/src/app/lazy/app-lazy/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.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

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

@@ -0,0 +1,3 @@
+<ion-app>
+  <ion-router-outlet></ion-router-outlet>
+</ion-app>

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

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

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

@@ -0,0 +1,64 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { InputsComponent } from '../inputs/inputs.component';
+import { ModalComponent } from '../modal/modal.component';
+import { ModalExampleComponent } from '../modal-example/modal-example.component';
+import { RouterLinkComponent } from '../router-link/router-link.component';
+import { RouterLinkPageComponent } from '../router-link-page/router-link-page.component';
+import { RouterLinkPage2Component } from '../router-link-page2/router-link-page2.component';
+import { RouterLinkPage3Component } from '../router-link-page3/router-link-page3.component';
+import { HomePageComponent } from '../home-page/home-page.component';
+import { NestedOutletComponent } from '../nested-outlet/nested-outlet.component';
+import { NestedOutletPageComponent } from '../nested-outlet-page/nested-outlet-page.component';
+import { NestedOutletPage2Component } from '../nested-outlet-page2/nested-outlet-page2.component';
+import { NavComponent } from '../nav/nav.component';
+import { ViewChildComponent } from '../view-child/view-child.component';
+import { ProvidersComponent } from '../providers/providers.component';
+import { FormComponent } from '../form/form.component';
+import { NavigationPage1Component } from '../navigation-page1/navigation-page1.component';
+import { NavigationPage2Component } from '../navigation-page2/navigation-page2.component';
+import { NavigationPage3Component } from '../navigation-page3/navigation-page3.component';
+import { AlertComponent } from '../alert/alert.component';
+import { AccordionComponent } from '../accordion/accordion.component';
+import { AccordionModalComponent } from '../accordion/accordion-modal/accordion-modal.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    InputsComponent,
+    ModalComponent,
+    ModalExampleComponent,
+    RouterLinkComponent,
+    RouterLinkPageComponent,
+    RouterLinkPage2Component,
+    RouterLinkPage3Component,
+    HomePageComponent,
+    NestedOutletComponent,
+    NestedOutletPageComponent,
+    NestedOutletPage2Component,
+    NavComponent,
+    ViewChildComponent,
+    ProvidersComponent,
+    FormComponent,
+    NavigationPage1Component,
+    NavigationPage2Component,
+    NavigationPage3Component,
+    AlertComponent,
+    AccordionComponent,
+    AccordionModalComponent
+  ],
+  imports: [
+    CommonModule,
+    AppRoutingModule,
+    FormsModule,
+    ReactiveFormsModule,
+    IonicModule.forRoot({ keyboardHeight: 12345 }),
+  ]
+})
+export class AppModule { }

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

@@ -0,0 +1,89 @@
+import { Routes } from '@angular/router';
+import { AppComponent } from './app.component';
+import { InputsComponent } from '../inputs/inputs.component';
+import { ModalComponent } from '../modal/modal.component';
+import { RouterLinkComponent } from '../router-link/router-link.component';
+import { RouterLinkPageComponent } from '../router-link-page/router-link-page.component';
+import { RouterLinkPage2Component } from '../router-link-page2/router-link-page2.component';
+import { RouterLinkPage3Component } from '../router-link-page3/router-link-page3.component';
+import { HomePageComponent } from '../home-page/home-page.component';
+import { NestedOutletComponent } from '../nested-outlet/nested-outlet.component';
+import { NestedOutletPageComponent } from '../nested-outlet-page/nested-outlet-page.component';
+import { NestedOutletPage2Component } from '../nested-outlet-page2/nested-outlet-page2.component';
+import { ViewChildComponent } from '../view-child/view-child.component';
+import { ProvidersComponent } from '../providers/providers.component';
+import { FormComponent } from '../form/form.component';
+import { NavigationPage1Component } from '../navigation-page1/navigation-page1.component';
+import { NavigationPage2Component } from '../navigation-page2/navigation-page2.component';
+import { NavigationPage3Component } from '../navigation-page3/navigation-page3.component';
+import { AlertComponent } from '../alert/alert.component';
+import { AccordionComponent } from '../accordion/accordion.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: AppComponent,
+    children: [
+      { path: '', component: HomePageComponent },
+      { path: 'version-test', loadChildren: () => import('../version-test').then(m => m.VersionTestModule) },
+      { path: 'accordions', component: AccordionComponent },
+      { path: 'alerts', component: AlertComponent },
+      { path: 'inputs', component: InputsComponent },
+      { path: 'textarea', loadChildren: () => import('../textarea/textarea.module').then(m => m.TextareaModule) },
+      { path: 'searchbar', loadChildren: () => import('../searchbar/searchbar.module').then(m => m.SearchbarModule) },
+      { path: 'form', component: FormComponent },
+      { path: 'modals', component: ModalComponent },
+      { path: 'modal-inline', loadChildren: () => import('../modal-inline').then(m => m.ModalInlineModule) },
+      { path: 'view-child', component: ViewChildComponent },
+      { path: 'keep-contents-mounted', loadChildren: () => import('../keep-contents-mounted').then(m => m.OverlayAutoMountModule) },
+      { path: 'overlays-inline', loadChildren: () => import('../overlays-inline').then(m => m.OverlaysInlineModule) },
+      { path: 'popover-inline', loadChildren: () => import('../popover-inline').then(m => m.PopoverInlineModule) },
+      { path: 'providers', component: ProvidersComponent },
+      { path: 'router-link', component: RouterLinkComponent },
+      { path: 'router-link-page', component: RouterLinkPageComponent },
+      { path: 'router-link-page2/:id', component: RouterLinkPage2Component },
+      { path: 'router-link-page3', component: RouterLinkPage3Component },
+      { path: 'standalone', loadComponent: () => import('../routing-standalone/standalone.component').then(c => c.StandaloneComponent) },
+      { path: 'tabs', redirectTo: '/lazy/tabs/account', pathMatch: 'full' },
+      {
+        path: 'navigation',
+        children: [
+          { path: 'page1', component: NavigationPage1Component },
+          { path: 'page2', component: NavigationPage2Component },
+          { path: 'page3', component: NavigationPage3Component }
+        ]
+      },
+      {
+        path: 'tabs',
+        loadChildren: () => import('../tabs/tabs.module').then(m => m.TabsPageModule)
+      },
+      {
+        path: 'tabs-global',
+        loadChildren: () => import('../tabs-global/tabs-global.module').then(m => m.TabsGlobalModule)
+      },
+      {
+        path: 'tabs-slots',
+        loadComponent: () => import('../tabs-slots.component').then(c => c.TabsSlotsComponent)
+      },
+      {
+        path: 'nested-outlet',
+        component: NestedOutletComponent,
+        children: [
+          {
+            path: 'page',
+            component: NestedOutletPageComponent
+          },
+          {
+            path: 'page2',
+            component: NestedOutletPage2Component
+          }
+        ]
+      },
+      {
+        path: 'form-controls/range',
+        loadChildren: () => import('../form-controls/range/range.module').then(m => m.RangeModule)
+      }
+    ]
+  },
+];
+

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

@@ -7,52 +7,52 @@
 </ion-header>
 <ion-content>
   <ion-list>
-    <ion-item routerLink="/alerts" [routerAnimation]="routerAnimation">
+    <ion-item routerLink="/lazy/alerts" [routerAnimation]="routerAnimation">
       <ion-label>
         Alerts test
       </ion-label>
     </ion-item>
-    <ion-item routerLink="/inputs">
+    <ion-item routerLink="/lazy/inputs">
       <ion-label>
         Inputs test
       </ion-label>
     </ion-item>
-    <ion-item routerLink="/form">
+    <ion-item routerLink="/lazy/form">
       <ion-label>
         Form test
       </ion-label>
     </ion-item>
-    <ion-item routerLink="/modals">
+    <ion-item routerLink="/lazy/modals">
       <ion-label>
         Modals test
       </ion-label>
     </ion-item>
-    <ion-item routerLink="/router-link">
+    <ion-item routerLink="/lazy/router-link">
       <ion-label>
         Router link test
       </ion-label>
     </ion-item>
-    <ion-item routerLink="/tabs">
+    <ion-item routerLink="/lazy/tabs">
       <ion-label>
         Tabs test
       </ion-label>
     </ion-item>
-    <ion-item routerLink="/nested-outlet/page">
+    <ion-item routerLink="/lazy/nested-outlet/page">
       <ion-label>
         Nested ion-router-outlet
       </ion-label>
     </ion-item>
-    <ion-item routerLink="/view-child">
+    <ion-item routerLink="/lazy/view-child">
       <ion-label>
         ViewChild()
       </ion-label>
     </ion-item>
-    <ion-item routerLink="/providers">
+    <ion-item routerLink="/lazy/providers">
       <ion-label>
         Providers
       </ion-label>
     </ion-item>
-    <ion-item routerLink="/accordions">
+    <ion-item routerLink="/lazy/accordions">
       <ion-label>
         Accordions Test
       </ion-label>

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

@@ -13,7 +13,7 @@ export class NavigationPage1Component {
 
   ionViewDidEnter() {
     if (count < 1) {
-      this.navController.navigateBack('/navigation/page2');
+      this.navController.navigateBack('/lazy/navigation/page2');
     }
     count++;
   }

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

@@ -12,6 +12,6 @@ export class NavigationPage2Component {
   ) {}
 
   ionViewDidEnter() {
-    this.navController.navigateForward('/navigation/page1');
+    this.navController.navigateForward('/lazy/navigation/page1');
   }
 }

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

@@ -11,6 +11,6 @@ export class NavigationPage3Component {
   ) {}
 
   ionViewDidEnter() {
-    this.navController.navigateRoot('/navigation/page2');
+    this.navController.navigateRoot('/lazy/navigation/page2');
   }
 }

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

@@ -0,0 +1,7 @@
+<ion-content>
+  <h1>Nested page 1</h1>
+  <p>
+    <ion-button routerLink="/lazy/tabs" id="goto-tabs">Go To Tabs</ion-button>
+    <ion-button routerLink="/lazy/nested-outlet/page2" id="goto-nested-page2">Go To SECOND</ion-button>
+  </p>
+</ion-content>

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

@@ -0,0 +1,6 @@
+<ion-content>
+  <h1>Nested page 2</h1>
+  <p>
+    <ion-button routerLink="/lazy/nested-outlet/page" id="goto-nested-page1">Go To FIRST</ion-button>
+  </p>
+</ion-content>

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

@@ -8,5 +8,5 @@
 </ion-header>
 
 <ion-content class="ion-padding">
-  <ion-button routerLink="/router-link-page3" id="goToPage3">Go to Page 3</ion-button>
-</ion-content>
+  <ion-button routerLink="/lazy/router-link-page3" id="goToPage3">Go to Page 3</ion-button>
+</ion-content>

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

@@ -15,25 +15,25 @@
   <p>Change Detections: <span id="counter">{{counter()}}</span></p>
 
   <p>
-    <ion-button routerLink="/router-link-page" expand="block" color="dark" id="routerLink">ion-button[routerLink]
+    <ion-button routerLink="/lazy/router-link-page" expand="block" color="dark" id="routerLink">ion-button[routerLink]
     </ion-button>
-    <ion-button routerLink="/router-link-page" routerDirection="root" expand="block" color="dark" id="routerLink-root">
+    <ion-button routerLink="/lazy/router-link-page" routerDirection="root" expand="block" color="dark" id="routerLink-root">
       ion-button[routerLink] (direction:root)</ion-button>
-    <ion-button routerLink="/router-link-page" routerDirection="back" expand="block" color="dark" id="routerLink-back">
+    <ion-button routerLink="/lazy/router-link-page" routerDirection="back" expand="block" color="dark" id="routerLink-back">
       ion-button[routerLink] (direction:back)</ion-button>
   </p>
 
   <p><a [routerLink]="null">null router link</a></p>
-  <p><a routerLink="/router-link-page" id="a">a[routerLink]</a></p>
-  <p><a routerLink="/router-link-page" routerDirection="root" id="a-root">a[routerLink] (direction:root)</a></p>
-  <p><a routerLink="/router-link-page" routerDirection="back" id="a-back">a[routerLink] (direction:back)</a></p>
+  <p><a routerLink="/lazy/router-link-page" id="a">a[routerLink]</a></p>
+  <p><a routerLink="/lazy/router-link-page" routerDirection="root" id="a-root">a[routerLink] (direction:root)</a></p>
+  <p><a routerLink="/lazy/router-link-page" routerDirection="back" id="a-back">a[routerLink] (direction:back)</a></p>
 
   <p><button (click)="navigate()" id="button">navigate</button></p>
   <p><button (click)="navigateForward()" id="button-forward">navigateForward</button></p>
   <p><button (click)="navigateRoot()" id="button-root">navigateForward</button></p>
   <p><button (click)="navigateBack()" id="button-back">navigateBack</button></p>
 
-  <p><button id="queryParamsFragment" routerLink="/router-link-page2/MyPageID==" [queryParams]="{ token: 'A&=#Y' }"
+  <p><button id="queryParamsFragment" routerLink="/lazy/router-link-page2/MyPageID==" [queryParams]="{ token: 'A&=#Y' }"
       fragment="myDiv1">Query Params and Fragment</button></p>
 
 </ion-content>

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

@@ -21,19 +21,19 @@ export class RouterLinkComponent implements OnInit, ViewWillEnter, ViewDidEnter,
   ) {}
 
   navigate() {
-    this.router.navigateByUrl('/router-link-page');
+    this.router.navigateByUrl('/lazy/router-link-page');
   }
 
   navigateForward() {
-    this.navCtrl.navigateForward('/router-link-page');
+    this.navCtrl.navigateForward('/lazy/router-link-page');
   }
 
   navigateBack() {
-    this.navCtrl.navigateBack('/router-link-page');
+    this.navCtrl.navigateBack('/lazy/router-link-page');
   }
 
   navigateRoot() {
-    this.navCtrl.navigateRoot('/router-link-page');
+    this.navCtrl.navigateRoot('/lazy/router-link-page');
   }
 
   counter() {

packages/angular/test/base/src/app/lazy/routing-standalone/standalone.component.html

@@ -0,0 +1,4 @@
+<ion-content>
+  <p>This is a standalone component rendered from a route.</p>
+  <ion-button routerLink="/lazy">Return home</ion-button>
+</ion-content>

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

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+import { RouterModule } from "@angular/router";
+
+import { IonicModule } from '@ionic/angular';
+
+@Component({
+  selector: 'app-standalone',
+  templateUrl: './standalone.component.html',
+  standalone: true,
+  imports: [IonicModule, RouterModule]
+})
+export class StandaloneComponent { }

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

@@ -0,0 +1,15 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Tab 3 - Page 2</ion-title>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/lazy/tabs/lazy"></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <p>
+    <ion-button routerLink="/lazy/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
+    <ion-button routerLink="/lazy/tabs/account/nested/1" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>
+  </p>
+</ion-content>

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

@@ -0,0 +1,15 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Tab 3 - Page 1</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <h1>LAZY LOADED TAB</h1>
+  <p>
+    <ion-button routerLink="/lazy/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
+    <ion-button routerLink="/lazy/tabs/account/nested/1" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>
+    <ion-button routerLink="/lazy/tabs/lazy/nested" id="goto-tab3-page2">Go to Tab 3 - Page 2</ion-button>
+
+  </p>
+</ion-content>

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

@@ -0,0 +1,20 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Tab 1 - Page 2 ({{id}})</ion-title>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <h1>Welcome to NESTED PAGE {{id}}</h1>
+  <p>
+    <ion-button routerLink="/lazy/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
+    <ion-button routerLink="/lazy/tabs/contact" id="goto-tab2-page1">Go to Tab 2 - Page 1</ion-button>
+    <ion-button routerLink="/lazy/tabs-global" id="goto-global">Go to Global Page</ion-button>
+    <ion-button routerLink="/lazy/tabs-global" id="goto-prev" (click)="navCtrl.pop()">Go to Previous Page (NavController).
+    </ion-button>
+    <ion-button routerLink="/lazy/tabs/account/nested/{{next()}}" id="goto-next">Go to Next</ion-button>
+  </p>
+</ion-content>

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

@@ -18,11 +18,11 @@
     Segment changed: <span class="segment-changed">{{changed}}</span>
   </p>
   <p>
-    <ion-button routerLink="/tabs/account/nested/1" id="goto-tab1-page2">Go to Page 2</ion-button>
-    <ion-button routerLink="/tabs/account/nested/1" [queryParams]="{search:'hello'}" fragment="fragment"
+    <ion-button routerLink="/lazy/tabs/account/nested/1" id="goto-tab1-page2">Go to Page 2</ion-button>
+    <ion-button routerLink="/lazy/tabs/account/nested/1" [queryParams]="{search:'hello'}" fragment="fragment"
       id="goto-nested-page1-with-query-params">Go to Page 2 with Query Params</ion-button>
-    <ion-button routerLink="/tabs/lazy/nested" id="goto-tab3-page2">Go to Tab 3 - Page 2</ion-button>
-    <ion-button routerLink="/nested-outlet/page" id="goto-nested-page1">Go to nested</ion-button>
+    <ion-button routerLink="/lazy/tabs/lazy/nested" id="goto-tab3-page2">Go to Tab 3 - Page 2</ion-button>
+    <ion-button routerLink="/lazy/nested-outlet/page" id="goto-nested-page1">Go to nested</ion-button>
     <ion-button (click)="navCtrl.pop()" id="goto-previous-page">Go to Previous Page</ion-button>
   </p>
 </ion-content>

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

@@ -18,8 +18,8 @@
     Segment changed: <span class="segment-changed">{{changed}}</span>
   </p>
   <p>
-    <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
-    <ion-button routerLink="/tabs/account/nested/1" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>
-    <ion-button routerLink="/nested-outlet/page" id="goto-nested-page1">Go to nested</ion-button>
+    <ion-button routerLink="/lazy/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
+    <ion-button routerLink="/lazy/tabs/account/nested/1" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>
+    <ion-button routerLink="/lazy/nested-outlet/page" id="goto-nested-page1">Go to nested</ion-button>
   </p>
 </ion-content>