chore(angular): update build tests and docs for angular 17 (#4690)

* chore: update build tests and docs for angular 17

* adding css

* adding in-app as dependancy for react

* adding in-app as react dependency

* removing in-app as dependency

* updating build test

* typo fix

* typo fix

---------

Co-authored-by: Scott Rees <[email protected]>

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

@@ -72,7 +72,7 @@ jobs:
           - framework: angular
             framework-version: latest
             build-tool: angular-cli
-            build-tool-version: 16
+            build-tool-version: latest
             pkg-manager: npm
             language: ts
             node-version: 20

build-system-tests/package.json

@@ -29,8 +29,8 @@
     "react-latest-cra-latest-js": "npm run setup:react:cra -- -l js",
     "react-18-next-12-ts": "npm run setup:react:next -- -f 18 -b 12",
     "react-latest-vite-2-ts": "npm run setup:react:vite -- -b 2",
-    "angular-latest-angular-cli-16-ts": "npm run setup:angular:cli -- -b 16",
-    "angular-14-angular-cli-14-ts": "npm run setup:angular:cli -- -f 14 -b 14 -n angular-latest-angular-cli-v14-ts",
+    "angular-latest-angular-cli-latest-ts": "npm run setup:angular:cli",
+    "angular-14-angular-cli-14-ts": "npm run setup:angular:cli -- -f 14 -b 14 -n angular-14-angular-cli-v14-ts",
     "vue-3-vue-cli-latest-ts": "npm run setup:vue:cli -- -f 3 -P yarn",
     "vue-latest-vite-latest-ts": "npm run setup:vue:vite",
     "vue-latest-vite-2-ts": "npm run setup:vue:vite -- -b 2",

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

@@ -131,12 +131,13 @@ if [[ "$FRAMEWORK" == 'react' && "$BUILD_TOOL" == 'vite' ]]; then
 fi
 
 if [[ "$FRAMEWORK" == 'angular' ]]; then
-    echo "cp templates/components/angular/app.component.ts mega-apps/${MEGA_APP_NAME}/src/app/app.component.ts"
-    cp templates/components/angular/app.component.ts mega-apps/${MEGA_APP_NAME}/src/app/app.component.ts
+    echo "cp templates/components/angular/app-angular-${FRAMEWORK_VERSION}.component.ts mega-apps/${MEGA_APP_NAME}/src/app/app.component.ts"
+    cp templates/components/angular/app-angular-${FRAMEWORK_VERSION}.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 "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\")"
+    npx json -I -f mega-apps/${MEGA_APP_NAME}/angular.json -e "this.projects[\"$MEGA_APP_NAME\"].architect.build.configurations.production.budgets = [{\"type\":\"initial\",\"maximumWarning\":\"600kb\",\"maximumError\":\"1.5mb\"},{\"type\":\"anyComponentStyle\",\"maximumWarning\":\"2kb\",\"maximumError\":\"4kb\"}]"
 
     # The following change is to test change polyfills so that the app works in browser in local.
     # See more: https://ui.docs.amplify.aws/angular/getting-started/troubleshooting

build-system-tests/templates/components/angular/app-angular-latest.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular';
+
+@Component({
+  standalone: true,
+  imports: [AmplifyAuthenticatorModule],
+  selector: 'app-root',
+  template: `
+    <amplify-authenticator>
+      <ng-template
+        amplifySlot="authenticated"
+        let-user="user"
+        let-signOut="signOut"
+      >
+        <h1>Welcome {{ user.username }}!</h1>
+        <button (click)="signOut()">Sign Out</button>
+      </ng-template>
+    </amplify-authenticator>
+  `,
+  styles: [],
+})
+export class AppComponent {
+  title = 'ng-app-ts';
+}

docs/src/pages/[platform]/connected-components/authenticator/quick-start-example.angular.mdx

@@ -45,6 +45,27 @@ Wrap your template with `amplify-authenticator` inside `app.component.html`
   </ng-template>
 </amplify-authenticator>
 ```
+**Only if you are using Angular 17,** import the `AmplifyAuthenticatorModule` in `app.component.ts`
+
+```ts{3,8,9}
+import { Component } from '@angular/core';
+import { Amplify } from 'aws-amplify';
+import { AmplifyAuthenticatorModule, AuthenticatorService } from '@aws-amplify/ui-angular';
+
+import awsExports from './aws-exports';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, RouterOutlet, AmplifyAuthenticatorModule],
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+})
+export class UseAuthenticatorComponent {
+  constructor(public authenticator: AuthenticatorService) {
+    Amplify.configure(awsExports);
+  }
+}
+```
 
 <Alert role="none" variation="info" heading="Angular Authenticator v1">
   Looking for a previous version of Authenticator? Checkout the [Authenticator v1 documentation](https://github.com/aws-amplify/amplify-ui/tree/legacy/legacy/amplify-ui-angular).

docs/src/pages/[platform]/getting-started/troubleshooting/shared/angular-polyfill.mdx

@@ -37,7 +37,6 @@ And finally, make sure to add `src/polyfills` to `files` in your `tsconfig`:
   ],
 }
 ```
-
   </Tabs.Panel>
 
   <Tabs.Panel value="Angular 12-14">

docs/src/pages/[platform]/index.angular.tsx

@@ -10,7 +10,7 @@ import {
   ThemingSection,
 } from '@/components/home/sections';
 
-const VueHomePage = ({ colorMode }) => {
+const AngularHomePage = ({ colorMode }) => {
   const {
     query: { platform = 'react' },
   } = useRouter();
@@ -27,4 +27,4 @@ const VueHomePage = ({ colorMode }) => {
   );
 };
 
-export default VueHomePage;
+export default AngularHomePage;