feat(angular): add standalone router outlet (#27926)

packages/angular/common/src/index.ts

@@ -30,3 +30,5 @@ export {
 } from './directives/navigation/router-link-delegate';
 export { NavDelegate } from './directives/navigation/nav-delegate';
 export { IonTabs } from './directives/navigation/tabs';
+
+export { ProxyCmp } from './utils/proxy';

packages/angular/standalone/src/index.ts

@@ -1,3 +1 @@
-// This is required to get ng-packagr to build.
-// Remove this when you actually have something to export
-export const placeholder = true;
+export { IonRouterOutlet } from './navigation/router-outlet';

packages/angular/standalone/src/navigation/router-outlet.ts

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { IonRouterOutlet as IonRouterOutletBase, ProxyCmp } from '@ionic/angular/common';
+import { defineCustomElement } from '@ionic/core/components/ion-router-outlet.js';
+
+@ProxyCmp({
+  defineCustomElementFn: defineCustomElement,
+})
+@Directive({
+  selector: 'ion-router-outlet',
+  standalone: true,
+})
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+export class IonRouterOutlet extends IonRouterOutletBase {}

packages/angular/test/base/e2e/src/standalone/router-outlet.spec.ts

@@ -0,0 +1,9 @@
+describe('Router Outlet', () => {
+  beforeEach(() => {
+    cy.visit('/standalone/router-outlet');
+  })
+
+  it('should render a as a child page of the router outlet', () => {
+    cy.ionPageVisible('ion-router-outlet app-router-outlet');
+  });
+})

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

@@ -1 +1 @@
-<router-outlet></router-outlet>
+<ion-router-outlet></ion-router-outlet>

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

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
-
+import { IonRouterOutlet } from '@ionic/angular/standalone';
 /**
  * This temporary code initialized Ionic and ensures components are visible.
  * TODO FW-4766 Can be removed when ticket is implemented
@@ -15,7 +15,7 @@ document.querySelector('html')!.classList.add('ion-ce')
   selector: 'app-root-standalone',
   templateUrl: './app.component.html',
   standalone: true,
-  imports: [RouterModule]
+  imports: [RouterModule, IonRouterOutlet]
 })
 export class AppComponent {
 }

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

@@ -7,6 +7,7 @@ export const routes: Routes = [
     component: AppComponent,
     children: [
       { path: 'test', loadComponent: () => import('../test/test.component').then(m => m.TestComponent) },
+      { path: 'router-outlet', loadComponent: () => import('../router-outlet/router-outlet.component').then(m => m.RouterOutletComponent) },
     ]
   },
 ];

packages/angular/test/base/src/app/standalone/router-outlet/router-outlet.component.html

@@ -0,0 +1 @@
+This should be visible and rendered inside of an ion-router-outlet.

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

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