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/test/apps/ng14/e2e/src/standalone-routing.spec.ts

@@ -1,9 +0,0 @@
-describe('Routing with Standalone Components', () => {
-  beforeEach(() => {
-    cy.visit('/version-test/standalone');
-  });
-
-  it('should render the component', () => {
-    cy.get('ion-content').contains('This is a standalone component rendered from a route.');
-  });
-});

angular/test/apps/ng14/package.json

@@ -31,12 +31,11 @@
     "@angular/router": "^14.1.0",
     "@ionic/angular": "^6.1.15",
     "@ionic/angular-server": "^6.1.15",
-    "angular-in-memory-web-api": "^0.11.0",
     "core-js": "^2.6.11",
     "express": "^4.15.2",
     "ionicons": "^6.0.4",
-    "rxjs": "^6.5.5",
-    "tslib": "^2.0.0",
+    "rxjs": "~7.5.0",
+    "tslib": "^2.3.0",
     "typescript-eslint-language-service": "^4.1.5",
     "zone.js": "^0.11.4"
   },
@@ -53,8 +52,8 @@
     "@nguniversal/builders": "^14.0.3",
     "@types/express": "^4.17.7",
     "@types/node": "^12.12.54",
-    "@typescript-eslint/eslint-plugin": "4.28.2",
-    "@typescript-eslint/parser": "4.28.2",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
     "concurrently": "^6.0.0",
     "cypress": "^10.2.0",
     "eslint": "^7.26.0",

angular/test/apps/ng14/src/app/app.component.html

@@ -1,3 +1,3 @@
 <ion-app>
-  <ion-router-outlet [environmentInjector]="environmentInjector"></ion-router-outlet>
+  <ion-router-outlet></ion-router-outlet>
 </ion-app>

angular/test/apps/ng14/src/app/app.component.ts

@@ -1,11 +1,8 @@
-import { Component, EnvironmentInjector } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-
-  constructor(public environmentInjector: EnvironmentInjector) { }
-}
+export class AppComponent { }

angular/test/apps/ng14/src/app/version-test/standalone/standalone.component.html

@@ -1,4 +0,0 @@
-<ion-content>
-  <p>This is a standalone component rendered from a route.</p>
-  <ion-button routerLink="/">Return home</ion-button>
-</ion-content>

angular/test/apps/ng14/src/app/version-test/standalone/standalone.component.ts

@@ -1,12 +0,0 @@
-import { Component } from "@angular/core";
-import { RouterModule } from "@angular/router";
-
-import { IonicModule } from '@ionic/angular';
-
-@Component({
-  selector: 'app-standalone',
-  templateUrl: './standalone.component.html',
-  standalone: true,
-  imports: [IonicModule, RouterModule]
-})
-export class StandaloneComponent { }

angular/test/apps/ng14/src/app/version-test/version-test-routing.module.ts

@@ -3,12 +3,7 @@ import { RouterModule } from "@angular/router";
 
 @NgModule({
   imports: [
-    RouterModule.forChild([
-      {
-        path: 'standalone',
-        loadComponent: () => import('./standalone/standalone.component').then(m => m.StandaloneComponent)
-      }
-    ])
+    RouterModule.forChild([])
   ],
   exports: [RouterModule]
 })