chore(angular): upgrade test apps to latest (#30517)

Issue number: N/A

---------

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

Angular base has outdated files, which has lead to many duplicated files
within the versioned apps. Base files should always be the latest.

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

- Updated base files to the latest
- Removed duplicate files from the versioned apps since base will
provide them
- Added files to the older versioned apps since they no longer align
with the latest files with base

## 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/docs/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. -->

N/A

docs/angular/testing.md

@@ -4,7 +4,7 @@ Ionic Framework supports multiple versions of Angular. As a result, we need to v
 
 ## Syncing Local Changes
 
-The Angular test app supports syncing your locally built changes for validation.
+The Angular test app supports syncing your locally built changes for validation. This allows you to test local changes like `core` without having to publish a new version of the package.
 
 1. Build the `core` directory.
 2. Navigate to `packages/angular` and run `npm run sync`.
@@ -16,6 +16,12 @@ The Angular test app supports syncing your locally built changes for validation.
 
 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).
 
+> [!NOTE]
+> Syncing is required to verify that the minimal supported Angular version is still compatible with the latest Ionic Framework changes.
+> For example, Ionic Framework 8 supports Angular 16, but the latest version of Ionic Framework may not be compatible with Angular 16. Syncing allows you to verify that the latest changes are still compatible with the minimal supported version.
+>
+> Support for the minimal version and maximum version can be found on the [Support page](https://ionicframework.com/docs/reference/support#ionic-angular) of the Ionic Framework documentation.
+
 ## Application Cache
 
 Angular CLI creates a cache of several files on disk by default in the `.angular` directory. This decreases the time taken to build the test application. However, the cache makes it difficult to quickly sync and check local changes of Ionic. As a result, the `.angular` cache is disabled by default in the test app projects.

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

@@ -78,14 +78,14 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "buildTarget": "test-app:build"
+            "browserTarget": "test-app:build"
           },
           "configurations": {
             "production": {
-              "buildTarget": "test-app:build:production"
+              "browserTarget": "test-app:build:production"
             },
             "development": {
-              "buildTarget": "test-app:build:development"
+              "browserTarget": "test-app:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -93,7 +93,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "buildTarget": "test-app:build"
+            "browserTarget": "test-app:build"
           }
         },
         "lint": {
@@ -124,7 +124,7 @@
           }
         },
         "serve-ssr": {
-          "builder": "@angular-devkit/build-angular:ssr-dev-server",
+          "builder": "@nguniversal/builders:ssr-dev-server",
           "options": {
             "browserTarget": "test-app:build",
             "serverTarget": "test-app:server"
@@ -137,7 +137,7 @@
           }
         },
         "prerender": {
-          "builder": "@angular-devkit/build-angular:prerender",
+          "builder": "@nguniversal/builders:prerender",
           "options": {
             "browserTarget": "test-app:build:production",
             "serverTarget": "test-app:server:production",

packages/angular/test/apps/ng16/e2e/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictMetadataEmit" : true
+  },
+  "extends": "../tsconfig.json",
+  "include": [
+    "src/**spec.ts",
+    "../cypress/support/index.d.ts"
+  ],
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "cypress",
+      "node"
+    ]
+  }
+}

packages/angular/test/apps/ng16/src/app/app-routing.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { routes } from './app.routes';
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, { bindToComponentInputs: true })],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }

packages/angular/test/apps/ng16/src/app/lazy/version-test/version-test-routing.module.ts

@@ -1,25 +0,0 @@
-import { NgModule } from "@angular/core";
-import { RouterModule } from "@angular/router";
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      {
-        path: 'modal-nav-params',
-        loadComponent: () => import('./modal-nav-params/modal-nav-params.component').then(m => m.ModalNavParamsComponent),
-      },
-      {
-        path: 'bind-route/:id',
-        data: {
-          title: 'data:bindToComponentInputs'
-        },
-        resolve: {
-          name: () => 'resolve:bindToComponentInputs'
-        },
-        loadComponent: () => import('./bind-component-inputs/bind-component-inputs.component').then(c => c.BindComponentInputsComponent)
-      }
-    ])
-  ],
-  exports: [RouterModule]
-})
-export class VersionTestRoutingModule { }

packages/angular/test/apps/ng16/src/main.server.ts

@@ -2,14 +2,9 @@ import { enableProdMode } from '@angular/core';
 
 import { environment } from './environments/environment';
 
-import { AppServerModule } from './app/app.server.module';
-
 if (environment.production) {
   enableProdMode();
 }
 
 export { AppServerModule } from './app/app.server.module';
-export { renderModule } from '@angular/platform-server';
-
-// Add a default export
-export default AppServerModule;
+export { renderModule, renderModuleFactory } from '@angular/platform-server';

packages/angular/test/apps/ng16/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app"
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts",
+    "src/zone-flags.ts"
+  ],
+  "include": ["src/**/*.d.ts"]
+}

packages/angular/test/apps/ng16/tsconfig.server.json

@@ -1,17 +1,15 @@
 {
-  "extends": "./tsconfig.json",
+  "extends": "./tsconfig.app.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app-server",
-    "target": "ES2016",
-    "module": "commonjs",
-    "types": ["node"]
+    "target": "es2016",
+    "types": [
+      "node"
+    ]
   },
   "files": [
     "src/main.server.ts",
-    "src/server.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
+    "server.ts"
   ],
   "angularCompilerOptions": {
     "entryModule": "./src/app/app.server.module#AppServerModule"

packages/angular/test/apps/ng16/tsconfig.spec.json

@@ -2,11 +2,13 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "module": "commonjs",
-    "types": ["jasmine", "node"]
+    "types": [
+      "node"
+    ]
   },
   "files": [
     "src/test.ts",
+    "src/zone-flags.ts",
     "src/polyfills.ts"
   ],
   "include": [

packages/angular/test/apps/ng17/e2e/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictMetadataEmit" : true
+  },
+  "extends": "../tsconfig.json",
+  "include": [
+    "src/**spec.ts",
+    "../cypress/support/index.d.ts"
+  ],
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "cypress",
+      "node"
+    ]
+  }
+}

packages/angular/test/apps/ng17/src/app/app-routing.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { routes } from './app.routes';
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, { bindToComponentInputs: true })],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }

packages/angular/test/apps/ng17/src/app/lazy/version-test/version-test-routing.module.ts

@@ -1,25 +0,0 @@
-import { NgModule } from "@angular/core";
-import { RouterModule } from "@angular/router";
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      {
-        path: 'modal-nav-params',
-        loadComponent: () => import('./modal-nav-params/modal-nav-params.component').then(m => m.ModalNavParamsComponent),
-      },
-      {
-        path: 'bind-route/:id',
-        data: {
-          title: 'data:bindToComponentInputs'
-        },
-        resolve: {
-          name: () => 'resolve:bindToComponentInputs'
-        },
-        loadComponent: () => import('./bind-component-inputs/bind-component-inputs.component').then(c => c.BindComponentInputsComponent)
-      }
-    ])
-  ],
-  exports: [RouterModule]
-})
-export class VersionTestRoutingModule { }

packages/angular/test/apps/ng17/src/main.server.ts

@@ -2,14 +2,9 @@ import { enableProdMode } from '@angular/core';
 
 import { environment } from './environments/environment';
 
-import { AppServerModule } from './app/app.server.module';
-
 if (environment.production) {
   enableProdMode();
 }
 
 export { AppServerModule } from './app/app.server.module';
-export { renderModule } from '@angular/platform-server';
-
-// Add a default export
-export default AppServerModule;
+export { renderModule, renderModuleFactory } from '@angular/platform-server';

packages/angular/test/apps/ng17/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app"
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts",
+    "src/zone-flags.ts"
+  ],
+  "include": ["src/**/*.d.ts"]
+}

packages/angular/test/apps/ng17/tsconfig.server.json

@@ -1,17 +1,15 @@
 {
-  "extends": "./tsconfig.json",
+  "extends": "./tsconfig.app.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app-server",
-    "target": "ES2016",
-    "module": "commonjs",
-    "types": ["node"]
+    "target": "es2016",
+    "types": [
+      "node"
+    ]
   },
   "files": [
     "src/main.server.ts",
-    "src/server.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
+    "server.ts"
   ],
   "angularCompilerOptions": {
     "entryModule": "./src/app/app.server.module#AppServerModule"

packages/angular/test/apps/ng17/tsconfig.spec.json

@@ -2,11 +2,13 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "module": "commonjs",
-    "types": ["jasmine", "node"]
+    "types": [
+      "node"
+    ]
   },
   "files": [
     "src/test.ts",
+    "src/zone-flags.ts",
     "src/polyfills.ts"
   ],
   "include": [

packages/angular/test/apps/ng18/e2e/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictMetadataEmit" : true
+  },
+  "extends": "../tsconfig.json",
+  "include": [
+    "src/**spec.ts",
+    "../cypress/support/index.d.ts"
+  ],
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "cypress",
+      "node"
+    ]
+  }
+}

packages/angular/test/apps/ng18/src/app/app-routing.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { routes } from './app.routes';
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, { bindToComponentInputs: true })],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }

packages/angular/test/apps/ng18/src/app/lazy/version-test/version-test-routing.module.ts

@@ -1,25 +0,0 @@
-import { NgModule } from "@angular/core";
-import { RouterModule } from "@angular/router";
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      {
-        path: 'modal-nav-params',
-        loadComponent: () => import('./modal-nav-params/modal-nav-params.component').then(m => m.ModalNavParamsComponent),
-      },
-      {
-        path: 'bind-route/:id',
-        data: {
-          title: 'data:bindToComponentInputs'
-        },
-        resolve: {
-          name: () => 'resolve:bindToComponentInputs'
-        },
-        loadComponent: () => import('./bind-component-inputs/bind-component-inputs.component').then(c => c.BindComponentInputsComponent)
-      }
-    ])
-  ],
-  exports: [RouterModule]
-})
-export class VersionTestRoutingModule { }

packages/angular/test/apps/ng18/src/main.server.ts

@@ -0,0 +1,10 @@
+import { enableProdMode } from '@angular/core';
+
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+export { AppServerModule } from './app/app.server.module';
+export { renderModule, renderModuleFactory } from '@angular/platform-server';

packages/angular/test/apps/ng18/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app"
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts",
+    "src/zone-flags.ts"
+  ],
+  "include": ["src/**/*.d.ts"]
+}

packages/angular/test/apps/ng18/tsconfig.server.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app-server",
+    "target": "es2016",
+    "types": [
+      "node"
+    ]
+  },
+  "files": [
+    "src/main.server.ts",
+    "server.ts"
+  ],
+  "angularCompilerOptions": {
+    "entryModule": "./src/app/app.server.module#AppServerModule"
+  }
+}

packages/angular/test/apps/ng18/tsconfig.spec.json

@@ -1,14 +1,18 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "outDir": "./out-tsc/app",
-    "types": []
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "node"
+    ]
   },
   "files": [
-    "src/main.ts",
+    "src/test.ts",
+    "src/zone-flags.ts",
     "src/polyfills.ts"
   ],
   "include": [
+    "src/**/*.spec.ts",
     "src/**/*.d.ts"
   ]
 }

packages/angular/test/apps/ng19/e2e/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "module": "commonjs",
-    "target": "ES2022",
-    "types": ["cypress", "node"]
-  },
-  "include": [
-    "../cypress/**/*.ts",
-    "../cypress/support/**/*.ts"
-  ]
-}

packages/angular/test/apps/ng19/server.ts

@@ -1,57 +0,0 @@
-import 'zone.js/dist/zone-node';
-
-import { ngExpressEngine } from '@nguniversal/express-engine';
-import * as express from 'express';
-import { join } from 'path';
-
-import { AppServerModule } from './src/main.server';
-import { APP_BASE_HREF } from '@angular/common';
-
-// The Express app is exported so that it can be used by serverless Functions.
-export function app() {
-  const server = express();
-  const distFolder = join(process.cwd(), 'dist/test-app/browser');
-
-  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
-  server.engine('html', ngExpressEngine({
-    bootstrap: AppServerModule,
-  }));
-
-  server.set('view engine', 'html');
-  server.set('views', distFolder);
-
-  // Example Express Rest API endpoints
-  // app.get('/api/**', (req, res) => { });
-  // Serve static files from /browser
-  server.get('*.*', express.static(distFolder, {
-    maxAge: '1y'
-  }));
-
-  // All regular routes use the Universal engine
-  server.get('*', (req, res) => {
-    res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
-  });
-
-  return server;
-}
-
-function run() {
-  const port = process.env.PORT || 4000;
-
-  // Start up the Node server
-  const server = app();
-  server.listen(port, () => {
-    console.log(`Node Express server listening on http://localhost:${port}`);
-  });
-}
-
-// Webpack will replace 'require' with '__webpack_require__'
-// '__non_webpack_require__' is a proxy to Node 'require'
-// The below code is to ensure that the server is run only when not requiring the bundle.
-declare const __non_webpack_require__: NodeRequire;
-const mainModule = __non_webpack_require__.main;
-if (mainModule && mainModule.filename === __filename) {
-  run();
-}
-
-export * from './src/main.server';

packages/angular/test/apps/ng19/src/app/app-routing.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { routes } from './app.routes';
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, { bindToComponentInputs: true })],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }

packages/angular/test/apps/ng19/src/app/lazy/version-test/version-test-routing.module.ts

@@ -1,25 +0,0 @@
-import { NgModule } from "@angular/core";
-import { RouterModule } from "@angular/router";
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      {
-        path: 'modal-nav-params',
-        loadComponent: () => import('./modal-nav-params/modal-nav-params.component').then(m => m.ModalNavParamsComponent),
-      },
-      {
-        path: 'bind-route/:id',
-        data: {
-          title: 'data:bindToComponentInputs'
-        },
-        resolve: {
-          name: () => 'resolve:bindToComponentInputs'
-        },
-        loadComponent: () => import('./bind-component-inputs/bind-component-inputs.component').then(c => c.BindComponentInputsComponent)
-      }
-    ])
-  ],
-  exports: [RouterModule]
-})
-export class VersionTestRoutingModule { }

packages/angular/test/apps/ng19/tsconfig.app.json

@@ -1,14 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/app",
-    "types": []
-  },
-  "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
-}

packages/angular/test/apps/ng19/tsconfig.json

@@ -1,35 +0,0 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "outDir": "./dist/out-tsc",
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "esModuleInterop": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "sourceMap": true,
-    "declaration": false,
-    "experimentalDecorators": true,
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "target": "ES2022",
-    "module": "ES2022",
-    "emitDecoratorMetadata": true,
-    "typeRoots": ["node_modules/@types"],
-    "lib": ["ES2022", "dom"],
-    "plugins": [
-      {
-        "name": "typescript-eslint-language-service"
-      }
-    ],
-    "useDefineForClassFields": false
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  }
-}

packages/angular/test/apps/ng20/angular.json

@@ -1,156 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "test-app": {
-      "root": "",
-      "sourceRoot": "src",
-      "projectType": "application",
-      "prefix": "app",
-      "schematics": {},
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/test-app/browser",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
-            "buildOptimizer": true,
-            "assets": [
-              "src/favicon.ico",
-              {
-                "glob": "**/*",
-                "input": "src/assets",
-                "output": "assets"
-              },
-              {
-                "glob": "**/*.svg",
-                "input": "node_modules/ionicons/dist/ionicons/svg",
-                "output": "./svg"
-              }
-            ],
-            "styles": ["src/styles.css"],
-            "scripts": []
-          },
-          "configurations": {
-            "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "aot": true,
-              "progress": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
-                }
-              ]
-            },
-            "development": {
-              "buildOptimizer": false,
-              "optimization": false,
-              "vendorChunk": true,
-              "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "buildTarget": "test-app:build"
-          },
-          "configurations": {
-            "production": {
-              "buildTarget": "test-app:build:production"
-            },
-            "development": {
-              "buildTarget": "test-app:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "buildTarget": "test-app:build"
-          }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
-          }
-        },
-        "server": {
-          "builder": "@angular-devkit/build-angular:server",
-          "options": {
-            "outputPath": "dist/test-app/server",
-            "main": "server.ts",
-            "tsConfig": "tsconfig.server.json"
-          },
-          "configurations": {
-            "production": {
-              "outputHashing": "media",
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "sourceMap": false,
-              "optimization": true
-            }
-          }
-        },
-        "serve-ssr": {
-          "builder": "@angular-devkit/build-angular:ssr-dev-server",
-          "options": {
-            "browserTarget": "test-app:build",
-            "serverTarget": "test-app:server"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "test-app:build:production",
-              "serverTarget": "test-app:server:production"
-            }
-          }
-        },
-        "prerender": {
-          "builder": "@angular-devkit/build-angular:prerender",
-          "options": {
-            "browserTarget": "test-app:build:production",
-            "serverTarget": "test-app:server:production",
-            "routes": []
-          }
-        }
-      }
-    }
-  },
-  "cli": {
-    "schematicCollections": ["@angular-eslint/schematics"],
-    "cache": {
-      "enabled": false
-    }
-  }
-}

packages/angular/test/apps/ng20/e2e/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "module": "commonjs",
-    "target": "ES2022",
-    "types": ["cypress", "node"]
-  },
-  "include": [
-    "../cypress/**/*.ts",
-    "../cypress/support/**/*.ts"
-  ]
-}

packages/angular/test/apps/ng20/server.ts

@@ -1,57 +0,0 @@
-import 'zone.js/dist/zone-node';
-
-import { ngExpressEngine } from '@nguniversal/express-engine';
-import * as express from 'express';
-import { join } from 'path';
-
-import { AppServerModule } from './src/main.server';
-import { APP_BASE_HREF } from '@angular/common';
-
-// The Express app is exported so that it can be used by serverless Functions.
-export function app() {
-  const server = express();
-  const distFolder = join(process.cwd(), 'dist/test-app/browser');
-
-  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
-  server.engine('html', ngExpressEngine({
-    bootstrap: AppServerModule,
-  }));
-
-  server.set('view engine', 'html');
-  server.set('views', distFolder);
-
-  // Example Express Rest API endpoints
-  // app.get('/api/**', (req, res) => { });
-  // Serve static files from /browser
-  server.get('*.*', express.static(distFolder, {
-    maxAge: '1y'
-  }));
-
-  // All regular routes use the Universal engine
-  server.get('*', (req, res) => {
-    res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
-  });
-
-  return server;
-}
-
-function run() {
-  const port = process.env.PORT || 4000;
-
-  // Start up the Node server
-  const server = app();
-  server.listen(port, () => {
-    console.log(`Node Express server listening on http://localhost:${port}`);
-  });
-}
-
-// Webpack will replace 'require' with '__webpack_require__'
-// '__non_webpack_require__' is a proxy to Node 'require'
-// The below code is to ensure that the server is run only when not requiring the bundle.
-declare const __non_webpack_require__: NodeRequire;
-const mainModule = __non_webpack_require__.main;
-if (mainModule && mainModule.filename === __filename) {
-  run();
-}
-
-export * from './src/main.server';

packages/angular/test/apps/ng20/src/app/app-routing.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { routes } from './app.routes';
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, { bindToComponentInputs: true })],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }

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

@@ -1,44 +0,0 @@
-import { Component } from "@angular/core";
-import { IonicModule } from "@ionic/angular";  // Only import IonicModule
-
-import { NavRootComponent } from "./nav-root.component";  // Import the NavRootComponent
-
-@Component({
-  selector: 'app-modal-nav-params',
-  template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Modal Nav Params</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      <ion-button id="open">Open Modal</ion-button>
-      <ion-modal #modal trigger="open">
-        <ng-template>
-          <ion-header>
-            <ion-toolbar>
-              <ion-buttons slot="start">
-                <ion-button (click)="modal.dismiss()">Close</ion-button>
-              </ion-buttons>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content>
-            <ion-nav [root]="root" [rootParams]="rootParams"></ion-nav>
-          </ion-content>
-        </ng-template>
-      </ion-modal>
-    </ion-content>
-  `,
-  standalone: true,
-  imports: [IonicModule]  // Only import IonicModule here, remove NavRootComponent
-})
-export class ModalNavParamsComponent {
-
-  root = NavRootComponent;  // Use the root component in the ion-nav
-  rootParams = {
-    params: {
-      id: 123
-    }
-  };
-
-}

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

@@ -1,36 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-
-import { IonicModule } from "@ionic/angular";
-
-/**
- * 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.
- *
- * https://github.com/ionic-team/ionic-framework/issues/27146
- */
-let rootParamsException = false;
-
-@Component({
-    selector: 'app-modal-content',
-    template: `
-    {{ hasException ? 'ERROR' : 'OK' }}
-  `,
-    imports: [IonicModule]
-})
-export class NavRootComponent implements OnInit {
-
-  params: any;
-
-  ngOnInit() {
-    if (this.params === undefined) {
-      rootParamsException = true;
-    }
-  }
-
-  get hasException() {
-    return rootParamsException;
-  }
-
-}

packages/angular/test/apps/ng20/src/app/lazy/version-test/version-test-routing.module.ts

@@ -1,25 +0,0 @@
-import { NgModule } from "@angular/core";
-import { RouterModule } from "@angular/router";
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      {
-        path: 'modal-nav-params',
-        loadComponent: () => import('./modal-nav-params/modal-nav-params.component').then(m => m.ModalNavParamsComponent),
-      },
-      {
-        path: 'bind-route/:id',
-        data: {
-          title: 'data:bindToComponentInputs'
-        },
-        resolve: {
-          name: () => 'resolve:bindToComponentInputs'
-        },
-        loadComponent: () => import('./bind-component-inputs/bind-component-inputs.component').then(c => c.BindComponentInputsComponent)
-      }
-    ])
-  ],
-  exports: [RouterModule]
-})
-export class VersionTestRoutingModule { }

packages/angular/test/apps/ng20/tsconfig.json

@@ -1,35 +0,0 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "outDir": "./dist/out-tsc",
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "esModuleInterop": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "sourceMap": true,
-    "declaration": false,
-    "experimentalDecorators": true,
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "target": "ES2022",
-    "module": "ES2022",
-    "emitDecoratorMetadata": true,
-    "typeRoots": ["node_modules/@types"],
-    "lib": ["ES2022", "dom"],
-    "plugins": [
-      {
-        "name": "typescript-eslint-language-service"
-      }
-    ],
-    "useDefineForClassFields": false
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  }
-}

packages/angular/test/base/angular.json

@@ -78,14 +78,14 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "test-app:build"
+            "buildTarget": "test-app:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "test-app:build:production"
+              "buildTarget": "test-app:build:production"
             },
             "development": {
-              "browserTarget": "test-app:build:development"
+              "buildTarget": "test-app:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -93,7 +93,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "test-app:build"
+            "buildTarget": "test-app:build"
           }
         },
         "lint": {
@@ -124,7 +124,7 @@
           }
         },
         "serve-ssr": {
-          "builder": "@nguniversal/builders:ssr-dev-server",
+          "builder": "@angular-devkit/build-angular:ssr-dev-server",
           "options": {
             "browserTarget": "test-app:build",
             "serverTarget": "test-app:server"
@@ -137,7 +137,7 @@
           }
         },
         "prerender": {
-          "builder": "@nguniversal/builders:prerender",
+          "builder": "@angular-devkit/build-angular:prerender",
           "options": {
             "browserTarget": "test-app:build:production",
             "serverTarget": "test-app:server:production",

packages/angular/test/base/e2e/tsconfig.json

@@ -1,20 +1,13 @@
 {
-  "angularCompilerOptions": {
-    "fullTemplateTypeCheck": true,
-    "strictMetadataEmit" : true
-  },
   "extends": "../tsconfig.json",
-  "include": [
-    "src/**spec.ts",
-    "../cypress/support/index.d.ts"
-  ],
   "compilerOptions": {
-    "outDir": "../out-tsc/app",
+    "outDir": "../out-tsc/e2e",
     "module": "commonjs",
-    "target": "es5",
-    "types": [
-      "cypress",
-      "node"
-    ]
-  }
+    "target": "ES2022",
+    "types": ["cypress", "node"]
+  },
+  "include": [
+    "../cypress/**/*.ts",
+    "../cypress/support/**/*.ts"
+  ]
 }

packages/angular/test/base/src/app/app-routing.module.ts

@@ -4,7 +4,7 @@ import { RouterModule } from '@angular/router';
 import { routes } from './app.routes';
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, { bindToComponentInputs: true })],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

packages/angular/test/base/src/app/lazy/version-test/version-test-routing.module.ts

@@ -1,13 +1,22 @@
 import { NgModule } from "@angular/core";
 import { RouterModule } from "@angular/router";
-import { VersionTestComponent } from "./version-test.component";
 
 @NgModule({
   imports: [
     RouterModule.forChild([
       {
-        path: '',
-        component: VersionTestComponent
+        path: 'modal-nav-params',
+        loadComponent: () => import('./modal-nav-params/modal-nav-params.component').then(m => m.ModalNavParamsComponent),
+      },
+      {
+        path: 'bind-route/:id',
+        data: {
+          title: 'data:bindToComponentInputs'
+        },
+        resolve: {
+          name: () => 'resolve:bindToComponentInputs'
+        },
+        loadComponent: () => import('./bind-component-inputs/bind-component-inputs.component').then(c => c.BindComponentInputsComponent)
       }
     ])
   ],

packages/angular/test/base/src/main.server.ts

@@ -2,9 +2,14 @@ import { enableProdMode } from '@angular/core';
 
 import { environment } from './environments/environment';
 
+import { AppServerModule } from './app/app.server.module';
+
 if (environment.production) {
   enableProdMode();
 }
 
 export { AppServerModule } from './app/app.server.module';
-export { renderModule, renderModuleFactory } from '@angular/platform-server';
+export { renderModule } from '@angular/platform-server';
+
+// Add a default export
+export default AppServerModule;

packages/angular/test/base/tsconfig.app.json

@@ -1,12 +1,14 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "outDir": "./out-tsc/app"
+    "outDir": "./out-tsc/app",
+    "types": []
   },
   "files": [
     "src/main.ts",
-    "src/polyfills.ts",
-    "src/zone-flags.ts"
+    "src/polyfills.ts"
   ],
-  "include": ["src/**/*.d.ts"]
+  "include": [
+    "src/**/*.d.ts"
+  ]
 }

packages/angular/test/base/tsconfig.json

@@ -1,21 +1,35 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "importHelpers": true,
     "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "moduleResolution": "node",
-    "module": "es2020",
-    "target": "es2020",
-    "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "emitDecoratorMetadata": true,
     "typeRoots": ["node_modules/@types"],
-    "lib": ["es2018", "dom"],
+    "lib": ["ES2022", "dom"],
     "plugins": [
       {
         "name": "typescript-eslint-language-service"
       }
-    ]
+    ],
+    "useDefineForClassFields": false
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
   }
 }

packages/angular/test/base/tsconfig.server.json

@@ -1,15 +1,17 @@
 {
-  "extends": "./tsconfig.app.json",
+  "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app-server",
-    "target": "es2016",
-    "types": [
-      "node"
-    ]
+    "target": "ES2016",
+    "module": "commonjs",
+    "types": ["node"]
   },
   "files": [
     "src/main.server.ts",
-    "server.ts"
+    "src/server.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
   ],
   "angularCompilerOptions": {
     "entryModule": "./src/app/app.server.module#AppServerModule"

packages/angular/test/base/tsconfig.spec.json

@@ -2,13 +2,11 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": [
-      "node"
-    ]
+    "module": "commonjs",
+    "types": ["jasmine", "node"]
   },
   "files": [
     "src/test.ts",
-    "src/zone-flags.ts",
     "src/polyfills.ts"
   ],
   "include": [