chore: update mega app setup to support angular 21 (#6760)

Author: soberm

build-system-tests/scripts/mega-app-copy-files.sh

@@ -85,12 +85,27 @@ if [[ "$FRAMEWORK" == 'angular' ]]; then
         USE_STANDALONE="false"
     fi
 
+    # Check if Angular 21+ for zone.js and app.config support
+    if [[ "$FRAMEWORK_VERSION" == "latest" || "$FRAMEWORK_VERSION" -ge 21 ]]; then
+        USE_V21_CONFIG="true"
+    else
+        USE_V21_CONFIG="false"
+    fi
+
     if [[ "$USE_STANDALONE" == "true" ]]; then
         echo "cp templates/components/angular/app-standalone.component.ts mega-apps/${MEGA_APP_NAME}/src/app/app.component.ts"
         cp templates/components/angular/app-standalone.component.ts mega-apps/${MEGA_APP_NAME}/src/app/app.component.ts
 
-        echo "cp templates/components/angular/main-standalone.ts mega-apps/${MEGA_APP_NAME}/src/main.ts"
-        cp templates/components/angular/main-standalone.ts mega-apps/${MEGA_APP_NAME}/src/main.ts
+        if [[ "$USE_V21_CONFIG" == "true" ]]; then
+            echo "cp templates/components/angular/main-standalone-v21.ts mega-apps/${MEGA_APP_NAME}/src/main.ts"
+            cp templates/components/angular/main-standalone-v21.ts mega-apps/${MEGA_APP_NAME}/src/main.ts
+
+            echo "cp templates/components/angular/app.config.ts mega-apps/${MEGA_APP_NAME}/src/app/app.config.ts"
+            cp templates/components/angular/app.config.ts mega-apps/${MEGA_APP_NAME}/src/app/app.config.ts
+        else
+            echo "cp templates/components/angular/main-standalone.ts mega-apps/${MEGA_APP_NAME}/src/main.ts"
+            cp templates/components/angular/main-standalone.ts mega-apps/${MEGA_APP_NAME}/src/main.ts
+        fi
 
         if [ -f "mega-apps/${MEGA_APP_NAME}/src/app/app.module.ts" ]; then
             echo "rm mega-apps/${MEGA_APP_NAME}/src/app/app.module.ts"

build-system-tests/scripts/mega-app-install.sh

@@ -95,6 +95,12 @@ elif [ "$FRAMEWORK" == 'angular' ]; then
     # remove angular since it's deprecated https://www.npmjs.com/package/angular
     # We've install @amplify/cli when creating the app
     DEPENDENCIES="$TAGGED_UI_FRAMEWORK aws-amplify"
+    
+    # Angular 21+ requires zone.js to be explicitly installed
+    if [[ "$FRAMEWORK_VERSION" == "latest" || "$FRAMEWORK_VERSION" -ge 21 ]]; then
+        DEPENDENCIES="$DEPENDENCIES zone.js"
+    fi
+    
     echo "DEPENDENCIES=$DEPENDENCIES"
 fi
 

build-system-tests/scripts/setup-mega-app.sh

@@ -82,13 +82,6 @@ echo "##################"
 echo "# Setup Mega App #"
 echo "##################"
 
-# Override Angular latest to v20 until v21 compatibility is resolved
-if [ "$FRAMEWORK" == "angular" ] && [ "$BUILD_TOOL" == "angular-cli" ] && [ "$FRAMEWORK_VERSION" == "latest" ] && [ "$BUILD_TOOL_VERSION" == "latest" ]; then
-    FRAMEWORK_VERSION="20"
-    BUILD_TOOL_VERSION="20"
-    echo "Overriding Angular latest to v20 to bypass compatibility issues with v21+"
-fi
-
 BASE_OPTIONS="--build-tool $BUILD_TOOL --name $MEGA_APP_NAME --framework $FRAMEWORK --framework-version $FRAMEWORK_VERSION"
 
 # Create mega app

build-system-tests/templates/components/angular/app.config.ts

@@ -0,0 +1,11 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+  ],
+};

build-system-tests/templates/components/angular/main-standalone-v21.ts

@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err)
+);

build-system-tests/templates/components/angular/polifills-appendix.ts

@@ -1,3 +1,5 @@
+import 'zone.js';
+
 (window as any).global = window;
 (window as any).process = {
   env: { DEBUG: undefined },