diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 5bbc649387..b0cb26f96a 100644
--- a/.github/workflows/build.yml
+++ b/.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:
diff --git a/.github/workflows/stencil-nightly.yml b/.github/workflows/stencil-nightly.yml
index 3277171139..dd778ec20d 100644
--- a/.github/workflows/stencil-nightly.yml
+++ b/.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:
diff --git a/docs/angular/testing.md b/docs/angular/testing.md
index dee9678da7..edc568866c 100644
--- a/docs/angular/testing.md
+++ b/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.
diff --git a/packages/angular/test/apps/ng16/package.json b/packages/angular/test/apps/ng16/package.json
index d12d21419a..43f431aeea 100644
--- a/packages/angular/test/apps/ng16/package.json
+++ b/packages/angular/test/apps/ng16/package.json
@@ -41,10 +41,10 @@
},
"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",
@@ -52,11 +52,11 @@
"@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",
diff --git a/packages/angular/test/apps/ng16/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts b/packages/angular/test/apps/ng16/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts
index 765a594950..0359e73dc3 100644
--- a/packages/angular/test/apps/ng16/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts
+++ b/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 = {};
diff --git a/packages/angular/test/apps/ng17/e2e/src/lazy/bind-component-inputs.spec.ts b/packages/angular/test/apps/ng17/e2e/src/lazy/bind-component-inputs.spec.ts
deleted file mode 100644
index 651747730b..0000000000
--- a/packages/angular/test/apps/ng17/e2e/src/lazy/bind-component-inputs.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-it("binding route data to inputs should work", () => {
- cy.visit('/lazy/version-test/bind-route/test?query=test');
-
- cy.get('#route-params').contains('test');
- cy.get('#query-params').contains('test');
- cy.get('#data').contains('data:bindToComponentInputs');
- cy.get('#resolve').contains('resolve:bindToComponentInputs');
-});
diff --git a/packages/angular/test/apps/ng17/e2e/src/lazy/modal-nav-params.spec.ts b/packages/angular/test/apps/ng17/e2e/src/lazy/modal-nav-params.spec.ts
deleted file mode 100644
index 80c24f1af3..0000000000
--- a/packages/angular/test/apps/ng17/e2e/src/lazy/modal-nav-params.spec.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-describe('Modal Nav Params', () => {
-
- beforeEach(() => {
- cy.visit('/lazy/version-test/modal-nav-params');
- });
-
- it('should assign the rootParams when presented in a modal multiple times', () => {
- cy.contains('Open Modal').click();
- cy.get('ion-modal').should('exist').should('be.visible');
- cy.get('ion-modal').contains('OK');
-
- cy.contains("Close").click();
- cy.get('ion-modal').should('not.be.visible');
-
- cy.contains('Open Modal').click();
- cy.get('ion-modal').should('exist').should('be.visible');
- cy.get('ion-modal').contains('OK').should('exist');
- });
-
-});
diff --git a/packages/angular/test/apps/ng17/src/app/lazy/version-test/bind-component-inputs/bind-component-inputs.component.ts b/packages/angular/test/apps/ng17/src/app/lazy/version-test/bind-component-inputs/bind-component-inputs.component.ts
deleted file mode 100644
index 5eeed55d22..0000000000
--- a/packages/angular/test/apps/ng17/src/app/lazy/version-test/bind-component-inputs/bind-component-inputs.component.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Component, Input, OnInit } from "@angular/core";
-import { IonicModule } from '@ionic/angular';
-
-@Component({
- selector: 'app-bind-route',
- template: `
-
-
- bindToComponentInputs
-
-
-
-
-
Bind Route
-
Route params: id: {{id}}
-
Query params: query: {{query}}
-
Data: title: {{title}}
-
Resolve: name: {{name}}
-
-
- `,
- standalone: true,
- imports: [IonicModule]
-})
-export class BindComponentInputsComponent implements OnInit {
-
- @Input() id?: string; // path parameter
- @Input() query?: string; // query parameter
- @Input() title?: string; // data property
- @Input() name?: string; // resolve property
-
- ngOnInit(): void {
- console.log('BindComponentInputsComponent.ngOnInit', {
- id: this.id,
- query: this.query,
- title: this.title,
- name: this.name
- });
- }
-
-}
diff --git a/packages/angular/test/apps/ng17/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts b/packages/angular/test/apps/ng17/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts
index 13bca637f3..49a1a4ad8b 100644
--- a/packages/angular/test/apps/ng17/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts
+++ b/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;
diff --git a/packages/angular/test/apps/ng18/e2e/src/lazy/bind-component-inputs.spec.ts b/packages/angular/test/apps/ng18/e2e/src/lazy/bind-component-inputs.spec.ts
deleted file mode 100644
index 651747730b..0000000000
--- a/packages/angular/test/apps/ng18/e2e/src/lazy/bind-component-inputs.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-it("binding route data to inputs should work", () => {
- cy.visit('/lazy/version-test/bind-route/test?query=test');
-
- cy.get('#route-params').contains('test');
- cy.get('#query-params').contains('test');
- cy.get('#data').contains('data:bindToComponentInputs');
- cy.get('#resolve').contains('resolve:bindToComponentInputs');
-});
diff --git a/packages/angular/test/apps/ng18/e2e/src/lazy/modal-nav-params.spec.ts b/packages/angular/test/apps/ng18/e2e/src/lazy/modal-nav-params.spec.ts
deleted file mode 100644
index 80c24f1af3..0000000000
--- a/packages/angular/test/apps/ng18/e2e/src/lazy/modal-nav-params.spec.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-describe('Modal Nav Params', () => {
-
- beforeEach(() => {
- cy.visit('/lazy/version-test/modal-nav-params');
- });
-
- it('should assign the rootParams when presented in a modal multiple times', () => {
- cy.contains('Open Modal').click();
- cy.get('ion-modal').should('exist').should('be.visible');
- cy.get('ion-modal').contains('OK');
-
- cy.contains("Close").click();
- cy.get('ion-modal').should('not.be.visible');
-
- cy.contains('Open Modal').click();
- cy.get('ion-modal').should('exist').should('be.visible');
- cy.get('ion-modal').contains('OK').should('exist');
- });
-
-});
diff --git a/packages/angular/test/apps/ng18/src/app/lazy/version-test/bind-component-inputs/bind-component-inputs.component.ts b/packages/angular/test/apps/ng18/src/app/lazy/version-test/bind-component-inputs/bind-component-inputs.component.ts
deleted file mode 100644
index 5eeed55d22..0000000000
--- a/packages/angular/test/apps/ng18/src/app/lazy/version-test/bind-component-inputs/bind-component-inputs.component.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Component, Input, OnInit } from "@angular/core";
-import { IonicModule } from '@ionic/angular';
-
-@Component({
- selector: 'app-bind-route',
- template: `
-
-
- bindToComponentInputs
-
-
-
-