feat(angular): update minimal Angular version to v19

.changeset/tidy-numbers-shop.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui-angular': minor
+---
+
+feat(angular): update minimal Angular version to v19

.github/dependency-review/config.yml

@@ -34,3 +34,4 @@ allow-licenses:
   - 'X11'
   - 'zlib-acknowledgement'
   - 'Zlib'
+  - 'LicenseRef-scancode-unicode'

.github/workflows/reusable-build-system-test.yml

@@ -55,9 +55,9 @@ jobs:
             pkg-manager: npm
             node-version: 20
           - framework: angular
-            framework-version: 14
+            framework-version: 19
             build-tool: angular-cli
-            build-tool-version: 14
+            build-tool-version: 19
             pkg-manager: npm
             node-version: 20
 

build-system-tests/README.md

@@ -20,7 +20,7 @@ We currently test for the following versions:
 | React (Next.js) | 18      | Next CLI    | 13      |
 | React           | 18      | Vite        | 3       |
 | Angular         | Latest  | Angular CLI | Latest  |
-| Angular         | 14      | Angular CLI | 14      |
+| Angular         | 19      | Angular CLI | 19      |
 | Vue (Nuxt)      | Latest  | Nuxt CLI    | Latest  |
 | Vue             | Latest  | Vite        | Latest  |
 | Vue             | Latest  | Vue CLI     | Latest  |
@@ -99,11 +99,3 @@ $ ./mega-app-build.sh --build-tool next --build-tool-version latest --name react
 $ ./mega-app-build.sh -B next -b latest -l typescript -n react-latest-next-latest-node-18-ts -F react -f latest -P npm
 $ ./mega-app-build.sh -n react-latest-next-latest-node-18-ts
 ```
-
-### Troubleshooting
-
-- If see the following error message:
-
-> “Your global Angular CLI version (14.2.11) is greater than your local version (12.2.18). The local Angular CLI version is used.”
-
-It might be a @angular/[email protected] installed in root-folder _node_modules_. Deleting it would resolve the error.

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

@@ -79,50 +79,29 @@ if [[ "$FRAMEWORK" == 'react' && "$BUILD_TOOL" == 'vite' ]]; then
 fi
 
 if [[ "$FRAMEWORK" == 'angular' ]]; then
-    if [[ "$FRAMEWORK_VERSION" == "latest" || "$FRAMEWORK_VERSION" -gt 15 ]]; then
-        USE_STANDALONE="true"
-    else
-        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
-
-        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"
-            rm mega-apps/${MEGA_APP_NAME}/src/app/app.module.ts
-        fi
-
-    else        
-        echo "cp templates/components/angular/app-ngmodule.component.ts mega-apps/${MEGA_APP_NAME}/src/app/app.component.ts"
-        cp templates/components/angular/app-ngmodule.component.ts mega-apps/${MEGA_APP_NAME}/src/app/app.component.ts
-
-
-        echo "cp templates/components/angular/app.module.ts mega-apps/${MEGA_APP_NAME}/src/app/app.module.ts"
-        cp templates/components/angular/app.module.ts mega-apps/${MEGA_APP_NAME}/src/app/app.module.ts
-
-
-        echo "cp templates/components/angular/main-ngmodule.ts mega-apps/${MEGA_APP_NAME}/src/main.ts"
-        cp templates/components/angular/main-ngmodule.ts mega-apps/${MEGA_APP_NAME}/src/main.ts
+    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
+
+    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"
+        rm mega-apps/${MEGA_APP_NAME}/src/app/app.module.ts
     fi
     echo "npx json -I -f mega-apps/${MEGA_APP_NAME}/angular.json -e \"this.projects[\\\"$MEGA_APP_NAME\\\"].architect.build.options.styles.push(\\\"node_modules/@aws-amplify/ui-angular/theme.css\\\")\""
     npx json -I -f mega-apps/${MEGA_APP_NAME}/angular.json -e "this.projects[\"$MEGA_APP_NAME\"].architect.build.options.styles.push(\"node_modules/@aws-amplify/ui-angular/theme.css\")"
@@ -141,22 +120,6 @@ if [[ "$FRAMEWORK" == 'angular' ]]; then
         echo "npx strip-json-comments mega-apps/${MEGA_APP_NAME}/tsconfig.app.json | npx json -a -e 'this.files.push(\"src/polyfills.ts\")' >tsconfig.app.json.tmp && mv tsconfig.app.json.tmp ./mega-apps/$MEGA_APP_NAME/tsconfig.app.json && rm -f tsconfig.app.json.tmp"
         npx strip-json-comments mega-apps/${MEGA_APP_NAME}/tsconfig.app.json | npx json -a -e 'this.files = this.files || []; this.files.push("src/polyfills.ts")' >tsconfig.app.json.tmp && mv tsconfig.app.json.tmp ./mega-apps/$MEGA_APP_NAME/tsconfig.app.json && rm -f tsconfig.app.json.tmp
     fi
-    # Angular 14 is incompatible with @types/node > 20.11.7, so pin at this version
-    if [[ "$FRAMEWORK_VERSION" == 14 ]]; then
-        echo "pin @types/node version in mega-apps/${MEGA_APP_NAME}/package.json"
-        echo "npx json -I -f mega-apps/${MEGA_APP_NAME}/package.json -e 'this.dependencies["@types/node"] = "20.11.7"'"
-        npx json -I -f mega-apps/${MEGA_APP_NAME}/package.json -e 'this.dependencies["@types/node"] = "20.11.7"'
-
-        # Add stylus overrides for Angular 14
-        echo "Adding stylus overrides for Angular 14"
-        echo "npx json -I -f mega-apps/${MEGA_APP_NAME}/package.json -e 'this.overrides = this.overrides || {}; this.overrides.stylus = \"github:stylus/stylus#0.59.0\"'"
-        npx json -I -f mega-apps/${MEGA_APP_NAME}/package.json -e 'this.overrides = this.overrides || {}; this.overrides.stylus = "github:stylus/stylus#0.59.0"'
-
-        echo "npx json -I -f mega-apps/${MEGA_APP_NAME}/package.json -e 'this.resolutions = this.resolutions || {}; this.resolutions.stylus = \"github:stylus/stylus#0.59.0\"'"
-        npx json -I -f mega-apps/${MEGA_APP_NAME}/package.json -e 'this.resolutions = this.resolutions || {}; this.resolutions.stylus = "github:stylus/stylus#0.59.0"'
-
-        echo "Stylus overrides added for Angular 14"
-    fi
 fi
 
 if [[ "$FRAMEWORK" == 'vue' ]]; then

examples/angular/angular.json

@@ -74,8 +74,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
+                  "maximumWarning": "15kb",
+                  "maximumError": "20kb"
                 }
               ]
             }
@@ -85,18 +85,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "angular:build"
+            "buildTarget": "angular:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "angular:build:production"
+              "buildTarget": "angular:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "angular:build"
+            "buildTarget": "angular:build"
           }
         },
         "test": {

examples/angular/package.json

@@ -13,24 +13,24 @@
     "e2e": "ng e2e"
   },
   "dependencies": {
-    "@angular/animations": "^14.3.0",
-    "@angular/common": "^14.3.0",
-    "@angular/compiler": "^14.3.0",
-    "@angular/core": "^14.3.0",
-    "@angular/platform-browser": "^14.3.0",
-    "@angular/platform-browser-dynamic": "^14.3.0",
-    "@angular/router": "^14.3.0",
+    "@angular/animations": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
     "@aws-amplify/ui-angular": "^5.1.6",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.13",
-    "@angular/cli": "^14.2.13",
-    "@angular/compiler-cli": "^14.3.0",
+    "@angular-devkit/build-angular": "^19.0.0",
+    "@angular/cli": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
     "@types/jasmine": "~3.6.0",
-    "@types/node": "^12.11.1",
+    "@types/node": "^24.10.1",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
@@ -41,13 +41,13 @@
     "karma-jasmine-html-reporter": "~1.5.0",
     "rimraf": "^5.0.0",
     "serve": "^12.0.0",
-    "ts-node": "~8.3.0",
+    "ts-node": "^10.9.1",
     "tslint": "~6.1.0",
-    "typescript": "~4.6.4"
+    "typescript": "~5.6.0"
   },
   "workspaces": {
     "nohoist": [
       "@types/jasmine"
     ]
   }
-}
+}

examples/angular/src/app/app.component.ts

@@ -4,6 +4,7 @@ import { Hub } from 'aws-amplify/utils';
 
 @Component({
   selector: 'app-root',
+  standalone: false,
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })

examples/angular/src/pages/ui/components/authenticator/auth-status/auth-status.component.ts

@@ -8,6 +8,7 @@ import awsExports from './aws-exports';
 
 @Component({
   selector: 'auth-status',
+  standalone: false,
   templateUrl: 'auth-status.component.html',
 })
 export class AuthStatusComponent {

examples/angular/src/pages/ui/components/authenticator/custom-sign-up-fields/custom-sign-up-fields.component.ts

@@ -4,6 +4,7 @@ import awsExports from './aws-exports';
 
 @Component({
   selector: 'custom-sign-up-fields',
+  standalone: false,
   templateUrl: 'custom-sign-up-fields.component.html',
 })
 export class CustomSignUpFieldsComponent {

examples/angular/src/pages/ui/components/authenticator/custom-slots/custom-slots.component.ts

@@ -6,6 +6,7 @@ import awsExports from './aws-exports';
 
 @Component({
   selector: 'custom-slots',
+  standalone: false,
   templateUrl: 'custom-slots.component.html',
 })
 export class CustomSlotsComponent {

examples/angular/src/pages/ui/components/authenticator/forgot-password/forgot-password.component.ts

@@ -5,6 +5,7 @@ import awsExports from './aws-exports';
 
 @Component({
   selector: 'forgot-password',
+  standalone: false,
   templateUrl: 'forgot-password.component.html',
 })
 export class ForgotPasswordComponent {

examples/angular/src/pages/ui/components/authenticator/hub-events/hub-events.component.ts

@@ -5,6 +5,7 @@ import awsExports from './aws-exports';
 
 @Component({
   selector: 'hub-events',
+  standalone: false,
   templateUrl: 'hub-events.component.html',
 })
 export class HubEventsComponent {

examples/angular/src/pages/ui/components/authenticator/i18n/i18n.component.ts

@@ -5,6 +5,7 @@ import { Amplify } from 'aws-amplify';
 import { I18n } from 'aws-amplify/utils';
 @Component({
   selector: 'i18n',
+  standalone: false,
   templateUrl: 'i18n.component.html',
 })
 export class I18nComponent implements OnInit {

examples/angular/src/pages/ui/components/authenticator/modal/modal.component.ts

@@ -5,6 +5,7 @@ import awsExports from './aws-exports';
 
 @Component({
   selector: 'modal',
+  standalone: false,
   templateUrl: 'modal.component.html',
 })
 export class ModalComponent {

examples/angular/src/pages/ui/components/authenticator/override-function-calls/override-function-calls.component.ts

@@ -5,6 +5,7 @@ import awsExports from './aws-exports';
 
 @Component({
   selector: 'override-function-calls',
+  standalone: false,
   templateUrl: 'override-function-calls.component.html',
 })
 export class OverrideFunctionCallsComponent {

examples/angular/src/pages/ui/components/authenticator/sign-in-federated/sign-in-federated.component.ts

@@ -4,6 +4,7 @@ import awsExports from './aws-exports';
 
 @Component({
   selector: 'sign-in-federated',
+  standalone: false,
   templateUrl: 'sign-in-federated.component.html',
 })
 export class SignInFederatedComponent {

examples/angular/src/pages/ui/components/authenticator/sign-in-sms-mfa/sign-in-sms-mfa.component.ts

@@ -9,6 +9,7 @@ import awsExports from './aws-exports';
 
 @Component({
   selector: 'sign-in-sms-mfa',
+  standalone: false,
   templateUrl: 'sign-in-sms-mfa.component.html',
 })
 export class SignInSMSMFAComponent implements OnInit {

examples/angular/src/pages/ui/components/authenticator/sign-in-totp-mfa/sign-in-totp-mfa.component.ts

@@ -5,6 +5,7 @@ import awsExports from './aws-exports';
 
 @Component({
   selector: 'sign-in-totp-mfa',
+  standalone: false,
   templateUrl: 'sign-in-totp-mfa.component.html',
 })
 export class SignInTOTPMFAComponent {

examples/angular/src/pages/ui/components/authenticator/sign-in-totp-sms/sign-in-totp-sms.component.ts

@@ -5,6 +5,7 @@ import awsExports from './aws-exports';
 
 @Component({
   selector: 'sign-in-totp-sms',
+  standalone: false,
   templateUrl: 'sign-in-totp-sms.component.html',
 })
 export class SignInTOTPSMSComponent {

examples/angular/src/pages/ui/components/authenticator/sign-in-with-email-mfa-selection/sign-in-with-email-mfa-selection.component.ts

@@ -6,6 +6,7 @@ import awsExports from './aws-exports';
 
 @Component({
   selector: 'app-sign-in-with-email-mfa-selection',
+  standalone: false,
   templateUrl: './sign-in-with-email-mfa-selection.component.html',
 })
 export class SignInWithEmailMfaSelectionComponent implements OnInit {

examples/angular/src/pages/ui/components/authenticator/sign-in-with-email-mfa-setup-selection/sign-in-with-email-mfa-setup-selection.component.ts

@@ -6,6 +6,7 @@ import awsExports from './aws-exports';
 
 @Component({
   selector: 'app-sign-in-with-email-mfa-setup-selection',
+  standalone: false,
   templateUrl: './sign-in-with-email-mfa-setup-selection.component.html',
 })
 export class SignInWithEmailMfaSetupSelectionComponent implements OnInit {

examples/angular/src/pages/ui/components/authenticator/sign-in-with-email-mfa/sign-in-with-email-mfa.component.ts

@@ -6,6 +6,7 @@ import awsExports from './aws-exports';
 
 @Component({
   selector: 'app-sign-in-with-email-mfa',
+  standalone: false,
   templateUrl: './sign-in-with-email-mfa.component.html',
 })
 export class SignInWithEmailMfaComponent {

examples/angular/src/pages/ui/components/authenticator/sign-in-with-email/sign-in-with-email.component.ts

@@ -4,6 +4,7 @@ import awsExports from './aws-exports';
 
 @Component({
   selector: 'sign-in-with-email',
+  standalone: false,
   templateUrl: 'sign-in-with-email.component.html',
 })
 export class SignInWithEmailComponent {

examples/angular/src/pages/ui/components/authenticator/sign-in-with-phone/sign-in-with-phone.component.ts

@@ -7,6 +7,7 @@ import awsExports from './aws-exports';
 
 @Component({
   selector: 'sign-in-with-phone',
+  standalone: false,
   templateUrl: 'sign-in-with-phone.component.html',
 })
 export class SignInWithPhoneComponent implements OnInit {

examples/angular/src/pages/ui/components/authenticator/sign-in-with-username/sign-in-with-username.component.ts

@@ -5,6 +5,7 @@ import awsExports from './aws-exports';
 
 @Component({
   selector: 'sign-in-with-username',
+  standalone: false,
   templateUrl: 'sign-in-with-username.component.html',
 })
 export class SignInWithUsernameComponent {

examples/angular/src/pages/ui/components/authenticator/sign-up-with-attributes/sign-up-with-attributes.component.ts

@@ -4,6 +4,7 @@ import awsExports from './aws-exports';
 
 @Component({
   selector: 'sign-up-with-attributes',
+  standalone: false,
   templateUrl: 'sign-up-with-attributes.component.html',
 })
 export class SignUpWithAttributesComponent {

examples/angular/src/pages/ui/components/authenticator/sign-up-with-email-lambda/sign-up-with-email-lambda.component.ts

@@ -4,6 +4,7 @@ import awsExports from './aws-exports';
 
 @Component({
   selector: 'sign-up-with-email-lambda',
+  standalone: false,
   templateUrl: 'sign-up-with-email-lambda.component.html',
 })
 export class SignUpWithEmailLambdaComponent {

examples/angular/src/pages/ui/components/authenticator/sign-up-with-email/sign-up-with-email.component.ts

@@ -10,6 +10,7 @@ Amplify.configure(awsExports);
 
 @Component({
   selector: 'sign-up-with-email',
+  standalone: false,
   templateUrl: 'sign-up-with-email.component.html',
 })
 export class SignUpWithEmailComponent implements OnInit {