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

Author: thetaPC

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/ng19/angular.json renamed to packages/angular/test/apps/ng16/angular.json

@@ -78,22 +78,22 @@
         "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"
         },
         "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

@@ -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/src/app/lazy/version-test/version-test-routing.module.ts

@@ -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/ng19/src/main.server.ts renamed to packages/angular/test/apps/ng16/src/main.server.ts

@@ -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.app.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/ng20/tsconfig.server.json renamed to packages/angular/test/apps/ng16/tsconfig.server.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/ng19/tsconfig.spec.json renamed to packages/angular/test/apps/ng16/tsconfig.spec.json

@@ -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/e2e/src/.gitkeep

@@ -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/e2e/tsconfig.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/src/app/app-routing.module.ts

@@ -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/src/app/lazy/version-test/version-test-routing.module.ts

@@ -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/ng20/src/main.server.ts renamed to packages/angular/test/apps/ng17/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';