refactor(angular): build with angular 16 (#28902)

[Issue number: Internal

---------

<!-- 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. -->

Ionic 8 drops support for Angular 14 and 15. As a result, Ionic Angular
should be built with Angular 16 to account for supported versions of
Angular.

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

- Updates Ionic Angular to build with Angular 16

Note: The ng14 and ng15 tests will fail because they are not compatible.
These test apps are being removed as part of FW-5868. However, the rest
of this PR can be reviewed. Once the test apps are removed, I will sync
in the changes and all tests should pass.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

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


⚠️ Blocked on merging until FW-5868 is complete.

packages/angular/common/src/directives/navigation/back-button.ts

@@ -1,6 +1,5 @@
-import { HostListener, Input, Optional, ElementRef, NgZone, ChangeDetectorRef, Directive } from '@angular/core';
+import { HostListener, Optional, ElementRef, NgZone, ChangeDetectorRef, Directive } from '@angular/core';
 import type { Components } from '@ionic/core';
-import type { AnimationBuilder } from '@ionic/core/components';
 
 import { Config } from '../../providers/config';
 import { NavController } from '../../providers/nav-controller';
@@ -22,12 +21,6 @@ export declare interface IonBackButton extends Components.IonBackButton {}
 })
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 export class IonBackButton {
-  @Input()
-  defaultHref: string | undefined;
-
-  @Input()
-  routerAnimation: AnimationBuilder | undefined;
-
   protected el: HTMLElement;
 
   constructor(

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

@@ -42,7 +42,9 @@ import { RouteView, StackDidChangeEvent, StackWillChangeEvent, getUrl, isTabSwit
   inputs: ['animated', 'animation', 'mode', 'swipeGesture'],
 })
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
-export class IonRouterOutlet implements OnDestroy, OnInit {
+export abstract class IonRouterOutlet implements OnDestroy, OnInit {
+  abstract outletContent: any;
+
   nativeEl: HTMLIonRouterOutletElement;
   activatedView: RouteView | null = null;
   tabsPrefix: string | undefined;
@@ -116,7 +118,6 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     router: Router,
     zone: NgZone,
     activatedRoute: ActivatedRoute,
-    protected outletContent: ViewContainerRef,
     @SkipSelf() @Optional() readonly parentOutlet?: IonRouterOutlet
   ) {
     this.nativeEl = elementRef.nativeElement;
@@ -296,7 +297,13 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
 
       // Calling `markForCheck` to make sure we will run the change detection when the
       // `RouterOutlet` is inside a `ChangeDetectionStrategy.OnPush` component.
-      enteringView = this.stackCtrl.createView(this.activated, activatedRoute);
+
+      /**
+       * At this point this.activated has been set earlier
+       * in this function, so it is guaranteed to be non-null.
+       */
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      enteringView = this.stackCtrl.createView(this.activated!, activatedRoute);
 
       // Store references to the proxy by component
       this.proxyMap.set(cmpRef.instance, activatedRouteProxy);

packages/angular/common/src/directives/navigation/tabs.ts

@@ -17,14 +17,14 @@ import { StackDidChangeEvent, StackWillChangeEvent } from './stack-utils';
   selector: 'ion-tabs',
 })
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
-export class IonTabs implements AfterContentInit, AfterContentChecked {
+export abstract class IonTabs implements AfterContentInit, AfterContentChecked {
   /**
    * Note: These must be redeclared on each child class since it needs
    * access to generated components such as IonRouterOutlet and IonTabBar.
    */
-  outlet: any;
-  tabBar: any;
-  tabBars: any;
+  abstract outlet: any;
+  abstract tabBar: any;
+  abstract tabBars: any;
 
   @ViewChild('tabsInner', { read: ElementRef, static: true }) tabsInner: ElementRef<HTMLDivElement>;