test(angular): add ng19 test app (#30041)

Issue number: internal

---------

## What is the current behavior?
There are tests apps for Angular 16, 17 and 18

## What is the new behavior?
Adds a test app for Angular 19

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

---------

Co-authored-by: Brandy Carney <[email protected]>

.github/workflows/build.yml

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

.github/workflows/stencil-nightly.yml

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

docs/angular/testing.md

@@ -6,11 +6,13 @@ Ionic Framework supports multiple versions of Angular. As a result, we need to v
 
 The Angular test app supports syncing your locally built changes for validation.
 
-1. Build the `core` and `packages/angular` directories using `npm run build`.
-2. [Build the Angular test app](#test-app-build-structure).
-3. Navigate to the built test app directory (e.g. `packages/angular/test/build/ng14`).
-4. Install dependencies using `npm install`.
-5. Sync your local changes using `npm run sync`.
+1. Build the `core` directory.
+2. Navigate to `packages/angular` and run `npm run sync`.
+3. Build `packages/angular` using `npm run build`.
+4. [Build the Angular test app](#test-app-build-structure).
+5. Navigate to the built test app directory (e.g. `packages/angular/test/build/ng14`).
+6. Install dependencies using `npm install`.
+7. Sync your local changes using `npm run sync`.
 
 From here you can either build the application or start a local dev server. When re-syncing changes, you will need to [wipe or disable the application cache](#application-cache).
 
@@ -86,6 +88,7 @@ As we add support for new versions of Angular, we will also need to update this
 2. Update the application by following the steps on https://update.angular.io/.
 3. Make note of any files that changed during the upgrade (`package.json`, `package-lock.json`, `angular.json`, etc).
 4. Copy the changed files to a new directory in `apps`.
+  - Do NOT copy the entire directory. The `test/base` directory contains shared files between all major versions. Only files that are different than previous major versions should be copied to the new directory in `apps`.
 5. Add a new entry to the matrix for `test-core-angular` in `./github/workflows/build.yml`. This will allow the new test app to run against all PRs.
 6. Commit these changes and push.
 

packages/angular/test/apps/ng16/package.json

@@ -41,22 +41,22 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^16.0.0",
-    "@angular-eslint/builder": "^16.0.0",
-    "@angular-eslint/eslint-plugin": "^16.0.0",
-    "@angular-eslint/eslint-plugin-template": "^16.0.0",
-    "@angular-eslint/schematics": "^16.0.0",
+    "@angular-eslint/builder": "^16.3.1",
+    "@angular-eslint/eslint-plugin": "^16.3.1",
+    "@angular-eslint/eslint-plugin-template": "^16.3.1",
+    "@angular-eslint/schematics": "^16.3.1",
     "@angular-eslint/template-parser": "^16.0.0",
     "@angular/cli": "^16.0.0",
     "@angular/compiler-cli": "^16.0.0",
     "@angular/language-service": "^16.0.0",
     "@nguniversal/builders": "^16.0.0",
     "@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.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "concurrently": "^6.0.0",
     "cypress": "^13.2.0",
-    "eslint": "^7.26.0",
+    "eslint": "^8.57.1",
     "ts-loader": "^6.2.2",
     "ts-node": "^8.3.0",
     "typescript": "~5.0.2",

packages/angular/test/apps/ng16/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts

@@ -1,10 +1,10 @@
 import { JsonPipe } from "@angular/common";
-import { Component, Input } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
 
 import { IonicModule } from "@ionic/angular";
 
 /**
- * This is used to track if any occurences of
+ * This is used to track if any occurrences of
  * the ion-nav root component being attached to
  * the DOM result in the rootParams not being
  * assigned to the component instance.
@@ -21,7 +21,7 @@ let rootParamsException = false;
   standalone: true,
   imports: [IonicModule, JsonPipe]
 })
-export class NavRootComponent {
+export class NavRootComponent implements OnInit {
 
   @Input() params: any = {};
 

packages/angular/test/apps/ng17/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts

@@ -1,10 +1,10 @@
 import { JsonPipe } from "@angular/common";
-import { Component, Input } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
 
 import { IonicModule } from "@ionic/angular";
 
 /**
- * This is used to track if any occurences of
+ * This is used to track if any occurrences of
  * the ion-nav root component being attached to
  * the DOM result in the rootParams not being
  * assigned to the component instance.
@@ -21,7 +21,7 @@ let rootParamsException = false;
   standalone: true,
   imports: [IonicModule, JsonPipe]
 })
-export class NavRootComponent {
+export class NavRootComponent implements OnInit {
 
   @Input() params: any;
 

packages/angular/test/apps/ng18/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts

@@ -1,10 +1,10 @@
 import { JsonPipe } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 
 import { IonicModule } from "@ionic/angular";
 
 /**
- * This is used to track if any occurences of
+ * This is used to track if any occurrences of
  * the ion-nav root component being attached to
  * the DOM result in the rootParams not being
  * assigned to the component instance.
@@ -21,7 +21,7 @@ let rootParamsException = false;
   standalone: true,
   imports: [IonicModule, JsonPipe]
 })
-export class NavRootComponent {
+export class NavRootComponent implements OnInit {
 
   params: any;