feat(angular,angular-server): angular v14 minimum support (#26822)

BREAKING CHANGE:

Angular v14 is now required to use `@ionic/angular` and `@ionic/angular-server`. Upgrade your project to Angular v14 by following the [Angular v14 update guide](https://update.angular.io/?l=3&v=13.0-14.0).

The dev-preview `environmentInjector` property has been removed from `ion-tabs` and `ion-router-outlet`. Standalone component routing is now available without additional custom configuration. Remove the `environmentInjector` property from your `ion-tabs` and `ion-router-outlet` components.

angular/src/directives/navigation/ion-router-outlet.ts

@@ -1,6 +1,5 @@
 import { Location } from '@angular/common';
 import {
-  ComponentFactoryResolver,
   ComponentRef,
   ElementRef,
   Injector,
@@ -8,24 +7,23 @@ import {
   OnDestroy,
   OnInit,
   ViewContainerRef,
+  inject,
   Attribute,
   Directive,
   EventEmitter,
   Optional,
   Output,
   SkipSelf,
-  Input,
+  EnvironmentInjector,
 } from '@angular/core';
-import { OutletContext, Router, ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET } from '@angular/router';
+import { OutletContext, Router, ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET, Data } from '@angular/router';
 import { componentOnReady } from '@ionic/core';
 import { Observable, BehaviorSubject } from 'rxjs';
 import { distinctUntilChanged, filter, switchMap } from 'rxjs/operators';
 
-import { EnvironmentInjector } from '../../di/r3_injector';
 import { AnimationBuilder } from '../../ionic-core';
 import { Config } from '../../providers/config';
 import { NavController } from '../../providers/nav-controller';
-import { isComponentFactoryResolver } from '../../util/util';
 
 import { StackController } from './stack-controller';
 import { RouteView, getUrl } from './stack-utils';
@@ -58,22 +56,20 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
 
   tabsPrefix: string | undefined;
 
-  /**
-   * @experimental
-   *
-   * The `EnvironmentInjector` provider instance from the parent component.
-   * Required for using standalone components with `ion-router-outlet`.
-   *
-   * Will be deprecated and removed when Angular 13 support is dropped.
-   */
-  @Input() environmentInjector: EnvironmentInjector;
-
   @Output() stackEvents = new EventEmitter<any>();
   // eslint-disable-next-line @angular-eslint/no-output-rename
   @Output('activate') activateEvents = new EventEmitter<any>();
   // eslint-disable-next-line @angular-eslint/no-output-rename
   @Output('deactivate') deactivateEvents = new EventEmitter<any>();
 
+  private parentContexts = inject(ChildrenOutletContexts);
+  private location = inject(ViewContainerRef);
+  private environmentInjector = inject(EnvironmentInjector);
+
+  // Ionic providers
+  private config = inject(Config);
+  private navCtrl = inject(NavController);
+
   set animation(animation: AnimationBuilder) {
     this.nativeEl.animation = animation;
   }
@@ -95,13 +91,8 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
   }
 
   constructor(
-    private parentContexts: ChildrenOutletContexts,
-    private location: ViewContainerRef,
     @Attribute('name') name: string,
     @Optional() @Attribute('tabs') tabs: string,
-    private config: Config,
-    private navCtrl: NavController,
-    @Optional() private componentFactoryResolver: ComponentFactoryResolver,
     commonLocation: Location,
     elementRef: ElementRef,
     router: Router,
@@ -112,8 +103,8 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     this.nativeEl = elementRef.nativeElement;
     this.name = name || PRIMARY_OUTLET;
     this.tabsPrefix = tabs === 'true' ? getUrl(router, activatedRoute) : undefined;
-    this.stackCtrl = new StackController(this.tabsPrefix, this.nativeEl, router, navCtrl, zone, commonLocation);
-    parentContexts.onChildOutletCreated(this.name, this as any);
+    this.stackCtrl = new StackController(this.tabsPrefix, this.nativeEl, router, this.navCtrl, zone, commonLocation);
+    this.parentContexts.onChildOutletCreated(this.name, this as any);
   }
 
   ngOnDestroy(): void {
@@ -125,12 +116,17 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
   }
 
   ngOnInit(): void {
+    this.initializeOutletWithName();
+  }
+
+  // Note: Ionic deviates from the Angular Router implementation here
+  private initializeOutletWithName() {
     if (!this.activated) {
       // If the outlet was not instantiated at the time the route got activated we need to populate
       // the outlet when it is initialized (ie inside a NgIf)
       const context = this.getContext();
       if (context?.route) {
-        this.activateWith(context.route, context.resolver || null);
+        this.activateWith(context.route, context.injector);
       }
     }
 
@@ -159,7 +155,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     return this._activatedRoute as ActivatedRoute;
   }
 
-  get activatedRouteData(): any {
+  get activatedRouteData(): Data {
     if (this._activatedRoute) {
       return this._activatedRoute.snapshot.data;
     }
@@ -221,10 +217,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     }
   }
 
-  activateWith(
-    activatedRoute: ActivatedRoute,
-    resolverOrInjector?: ComponentFactoryResolver | EnvironmentInjector | null
-  ): void {
+  activateWith(activatedRoute: ActivatedRoute, environmentInjector: EnvironmentInjector | null): void {
     if (this.isActivated) {
       throw new Error('Cannot activate an already activated outlet');
     }
@@ -252,22 +245,6 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
        * We check for the presence of this property to determine if the route is
        * using standalone components.
        */
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      if (snapshot.routeConfig!.component == null && this.environmentInjector == null) {
-        console.warn(
-          '[Ionic Warning]: You must supply an environmentInjector to use standalone components with routing:\n\n' +
-            'In your component class, add:\n\n' +
-            `   import { EnvironmentInjector } from '@angular/core';\n` +
-            '   constructor(public environmentInjector: EnvironmentInjector) {}\n' +
-            '\n' +
-            'In your router outlet template, add:\n\n' +
-            '   <ion-router-outlet [environmentInjector]="environmentInjector"></ion-router-outlet>\n\n' +
-            'Alternatively, if you are routing within ion-tabs:\n\n' +
-            '   <ion-tabs [environmentInjector]="environmentInjector"></ion-tabs>'
-        );
-        return;
-      }
-
       const childContexts = this.parentContexts.getOrCreateContext(this.name).children;
 
       // We create an activated route proxy object that will maintain future updates for this component
@@ -277,43 +254,15 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
 
       const injector = new OutletInjector(activatedRouteProxy, childContexts, this.location.injector);
 
-      /**
-       * The resolver is not always provided and is required in Angular 12.
-       * Fallback to the class-level provider when the resolver is not set.
-       */
-      resolverOrInjector = resolverOrInjector || this.componentFactoryResolver;
-
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const component = snapshot.routeConfig!.component ?? snapshot.component;
 
-      if (resolverOrInjector && isComponentFactoryResolver(resolverOrInjector)) {
-        // Backwards compatibility for Angular 13 and lower
-        const factory = resolverOrInjector.resolveComponentFactory(component);
-        cmpRef = this.activated = this.location.createComponent(factory, this.location.length, injector);
-      } else {
-        /**
-         * Angular 14 and higher.
-         *
-         * TODO: FW-1641: Migrate once Angular 13 support is dropped.
-         *
-         * When we drop < Angular 14, we can replace the following code with:
-         * ```ts
-          const environmentInjector = resolverOrInjector ?? this.environmentInjector;
-            cmpRef = this.activated = location.createComponent(component, {
-              index: location.length,
-              injector,
-              environmentInjector,
-            });
-         * ```
-         * where `this.environmentInjector` is a provider of `EnvironmentInjector` from @angular/core.
-         */
-        const environmentInjector = resolverOrInjector ?? this.environmentInjector;
-        cmpRef = this.activated = this.location.createComponent(component, {
-          index: this.location.length,
-          injector,
-          environmentInjector,
-        } as any);
-      }
+      cmpRef = this.activated = this.location.createComponent(component, {
+        index: this.location.length,
+        injector,
+        environmentInjector: environmentInjector ?? this.environmentInjector,
+      });
+
       // Once the component is created we can push it to our local subject supplied to the proxy
       component$.next(cmpRef.instance);
 

angular/src/directives/navigation/ion-tabs.ts

@@ -1,6 +1,5 @@
-import { Component, ContentChild, EventEmitter, HostListener, Input, Output, ViewChild } from '@angular/core';
+import { Component, ContentChild, EventEmitter, HostListener, Output, ViewChild } from '@angular/core';
 
-import { EnvironmentInjector } from '../../di/r3_injector';
 import { NavController } from '../../providers/nav-controller';
 import { IonTabBar } from '../proxies';
 
@@ -11,12 +10,7 @@ import { StackEvent } from './stack-utils';
   selector: 'ion-tabs',
   template: ` <ng-content select="[slot=top]"></ng-content>
     <div class="tabs-inner">
-      <ion-router-outlet
-        #outlet
-        tabs="true"
-        [environmentInjector]="environmentInjector"
-        (stackEvents)="onPageSelected($event)"
-      ></ion-router-outlet>
+      <ion-router-outlet #outlet tabs="true" (stackEvents)="onPageSelected($event)"></ion-router-outlet>
     </div>
     <ng-content></ng-content>`,
   styles: [
@@ -52,16 +46,6 @@ export class IonTabs {
   @ViewChild('outlet', { read: IonRouterOutlet, static: false }) outlet: IonRouterOutlet;
   @ContentChild(IonTabBar, { static: false }) tabBar: IonTabBar | undefined;
 
-  /**
-   * @experimental
-   *
-   * The `EnvironmentInjector` provider instance from the parent component.
-   * Required for using standalone components with `ion-router-outlet`.
-   *
-   * Will be deprecated and removed when Angular 13 support is dropped.
-   */
-  @Input() environmentInjector: EnvironmentInjector;
-
   @Output() ionTabsWillChange = new EventEmitter<{ tab: string }>();
   @Output() ionTabsDidChange = new EventEmitter<{ tab: string }>();
 

angular/src/directives/navigation/nav-delegate.ts

@@ -1,4 +1,4 @@
-import { ComponentFactoryResolver, ElementRef, Injector, ViewContainerRef, Directive } from '@angular/core';
+import { ElementRef, Injector, Directive, EnvironmentInjector } from '@angular/core';
 
 import { AngularDelegate } from '../../providers/angular-delegate';
 import { ProxyCmp, proxyOutputs } from '../angular-component-lib/utils';
@@ -29,13 +29,12 @@ export class NavDelegate {
   protected el: HTMLElement;
   constructor(
     ref: ElementRef,
-    resolver: ComponentFactoryResolver,
+    environmentInjector: EnvironmentInjector,
     injector: Injector,
-    angularDelegate: AngularDelegate,
-    location: ViewContainerRef
+    angularDelegate: AngularDelegate
   ) {
     this.el = ref.nativeElement;
-    ref.nativeElement.delegate = angularDelegate.create(resolver, injector, location);
+    ref.nativeElement.delegate = angularDelegate.create(environmentInjector, injector);
     proxyOutputs(this, this.el, ['ionNavDidChange', 'ionNavWillChange']);
   }
 }