feat(angular): add standalone providers, route strategy, component binding provider (#27997)

packages/angular/common/src/directives/navigation/router-outlet.ts

@@ -20,6 +20,7 @@ import {
   Injectable,
   reflectComponentType,
 } from '@angular/core';
+import type { Provider } from '@angular/core';
 import { OutletContext, Router, ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET, Data } from '@angular/router';
 import { componentOnReady } from '@ionic/core/components';
 import type { AnimationBuilder } from '@ionic/core/components';
@@ -433,7 +434,7 @@ class OutletInjector implements Injector {
 }
 
 // TODO: FW-4785 - Remove this once Angular 15 support is dropped
-export const INPUT_BINDER = new InjectionToken<RoutedComponentInputBinder>('');
+const INPUT_BINDER = new InjectionToken<RoutedComponentInputBinder>('');
 
 /**
  * Injectable used as a tree-shakable provider for opting in to binding router data to component
@@ -450,7 +451,7 @@ export const INPUT_BINDER = new InjectionToken<RoutedComponentInputBinder>('');
  * the subscriptions are cleaned up.
  */
 @Injectable()
-export class RoutedComponentInputBinder {
+class RoutedComponentInputBinder {
   private outletDataSubscriptions = new Map<IonRouterOutlet, Subscription>();
 
   bindActivatedRouteToOutletComponent(outlet: IonRouterOutlet): void {
@@ -507,3 +508,22 @@ export class RoutedComponentInputBinder {
     this.outletDataSubscriptions.set(outlet, dataSubscription);
   }
 }
+
+export const provideComponentInputBinding = (): Provider => {
+  return {
+    provide: INPUT_BINDER,
+    useFactory: componentInputBindingFactory,
+    deps: [Router],
+  };
+};
+
+function componentInputBindingFactory(router?: Router) {
+  /**
+   * We cast the router to any here, since the componentInputBindingEnabled
+   * property is not available until Angular v16.
+   */
+  if ((router as any)?.componentInputBindingEnabled) {
+    return new RoutedComponentInputBinder();
+  }
+  return null;
+}

packages/angular/common/src/index.ts

@@ -24,7 +24,7 @@ export { NavParams } from './directives/navigation/nav-params';
 export { IonPopover } from './overlays/popover';
 export { IonModal } from './overlays/modal';
 
-export { IonRouterOutlet, INPUT_BINDER, RoutedComponentInputBinder } from './directives/navigation/router-outlet';
+export { IonRouterOutlet, provideComponentInputBinding } from './directives/navigation/router-outlet';
 export type { StackEvent } from './directives/navigation/stack-utils';
 
 export { IonBackButtonDelegate } from './directives/navigation/back-button';
@@ -36,3 +36,5 @@ export { NavDelegate } from './directives/navigation/nav-delegate';
 export { IonTabs } from './directives/navigation/tabs';
 
 export { ProxyCmp } from './utils/proxy';
+
+export { IonicRouteStrategy } from './utils/routing';

packages/angular/src/index.ts

@@ -35,11 +35,9 @@ export {
   Platform,
   AngularDelegate,
   NavParams,
+  IonicRouteStrategy,
 } from '@ionic/angular/common';
 
-// ROUTER STRATEGY
-export { IonicRouteStrategy } from './util/ionic-router-reuse-strategy';
-
 // TYPES
 export * from './types/ionic-lifecycle-hooks';
 

packages/angular/src/ionic-module.ts

@@ -1,13 +1,11 @@
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { ModuleWithProviders, APP_INITIALIZER, NgModule, NgZone } from '@angular/core';
-import { Router } from '@angular/router';
 import {
   ModalController,
   PopoverController,
   ConfigToken,
   AngularDelegate,
-  INPUT_BINDER,
-  RoutedComponentInputBinder,
+  provideComponentInputBinding,
 } from '@ionic/angular/common';
 import { IonicConfig } from '@ionic/core';
 
@@ -76,23 +74,8 @@ export class IonicModule {
           multi: true,
           deps: [ConfigToken, DOCUMENT, NgZone],
         },
-        {
-          provide: INPUT_BINDER,
-          useFactory: componentInputBindingFactory,
-          deps: [Router],
-        },
+        provideComponentInputBinding(),
       ],
     };
   }
 }
-
-function componentInputBindingFactory(router?: Router) {
-  /**
-   * We cast the router to any here, since the componentInputBindingEnabled
-   * property is not available until Angular v16.
-   */
-  if ((router as any)?.componentInputBindingEnabled) {
-    return new RoutedComponentInputBinder();
-  }
-  return null;
-}

packages/angular/standalone/src/index.ts

@@ -4,3 +4,22 @@ export { IonPopover } from './overlays/popover';
 export { IonRouterOutlet } from './navigation/router-outlet';
 export { IonRouterLink, IonRouterLinkWithHref } from './navigation/router-link-delegate';
 export { IonNav } from './navigation/nav-delegate';
+
+export {
+  ActionSheetController,
+  AlertController,
+  LoadingController,
+  MenuController,
+  ModalController,
+  PickerController,
+  PopoverController,
+  ToastController,
+  AnimationController,
+  GestureController,
+  DomController,
+  NavController,
+  Config,
+  Platform,
+  NavParams,
+  IonicRouteStrategy,
+} from '@ionic/angular/common';