refactor(angular): remove angular 14 and 15 dependencies (#29169)

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

With Ionic 8 we are dropping Angular 14 and 15 support.

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

- This PR officially drops Angular 14 and 15 support.
Note: The work to do this was done a while ago, but this branch was
never merged into `feature-8.0`. The breaking change was already noted
in the breaking change guide, so this is not an additional breaking
change on top of what was already specified.


## Does this introduce a breaking change?

- [x] Yes
- [ ] 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. -->

---------

Co-authored-by: Brandy Carney <[email protected]>
Co-authored-by: Maria Hutt <[email protected]>
Co-authored-by: Amanda Johnston <[email protected]>

Author: 4 people

.github/workflows/build.yml

@@ -140,7 +140,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng14, ng15, ng16, ng17]
+        apps: [ng16, ng17]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:

packages/angular-server/package-lock.json

@@ -35,30 +35,30 @@
     "prettier.fix": "prettier \"**/*.ts\" --write"
   },
   "peerDependencies": {
-    "@angular/core": ">=14.0.0",
-    "@angular/platform-server": ">=14.0.0",
+    "@angular/core": ">=16.0.0",
+    "@angular/platform-server": ">=16.0.0",
     "rxjs": ">=7.5.0",
-    "zone.js": ">=0.11.0"
+    "zone.js": ">=0.13.0"
   },
   "devDependencies": {
-    "@angular-eslint/eslint-plugin": "^14.0.0",
-    "@angular/animations": "^14.0.0",
-    "@angular/common": "^14.0.0",
-    "@angular/compiler": "^14.0.0",
-    "@angular/compiler-cli": "^14.0.0",
-    "@angular/core": "^14.0.0",
-    "@angular/platform-browser": "^14.0.0",
-    "@angular/platform-browser-dynamic": "^14.0.0",
-    "@angular/platform-server": "^14.0.0",
+    "@angular-eslint/eslint-plugin": "^16.0.0",
+    "@angular/animations": "^16.0.0",
+    "@angular/common": "^16.0.0",
+    "@angular/compiler": "^16.0.0",
+    "@angular/compiler-cli": "^16.0.0",
+    "@angular/core": "^16.0.0",
+    "@angular/platform-browser": "^16.0.0",
+    "@angular/platform-browser-dynamic": "^16.0.0",
+    "@angular/platform-server": "^16.0.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^5.2.0",
     "eslint": "^7.32.0",
     "eslint-plugin-import": "^2.25.2",
-    "ng-packagr": "^14.0.0",
+    "ng-packagr": "^16.0.0",
     "prettier": "^2.4.1",
     "rxjs": "^7.8.0",
-    "typescript": "~4.7.2"
+    "typescript": "~4.9.3"
   },
   "prettier": "@ionic/prettier-config",
   "dependencies": {

packages/angular-server/package.json

@@ -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/back-button.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/router-outlet.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>;