ng-amplify Angular Fullstack App with AWS Amplify Gen 2

This is a submission for the The AWS Amplify Fullstack TypeScript Challenge

What I Built

I have built and deployed a secure and scalable Angular full-stack application with AWS Amplify Gen 2, leveraging built-in authentication functionalities and UI components for a streamlined user experience and working on implementing other features.

Demo

main.d44ct9hkj3dje.amplifyapp.com

Journey

Here’s a breakdown of how to build and deploy an Angular fullstack application with AWS Amplify Gen 2, integrating user authentication and leveraging Amplify connected components:

1. Setting Up the Project:

Prerequisites: Node.js, npm (or yarn), AWS account with IAM user configured.
Create Angular Project: set up a basic Angular project.
Install Amplify CLI: npm install -g @aws-amplify/cli

2. Initialize Amplify in your project:

amplify init

3: Add Authentication

amplify add auth

Choose the default configuration or customize it according to your needs.

4: Install Amplify Angular Library

npm add @aws-amplify/ui-angular

5: Implement Authentication

//app.component.html

<amplify-authenticator>

<ng-template amplifySlot=“authenticated” let-user=“user” let-signOut=“signOut”>

<app-home></app-home>

<button (click)=“signOut()”>Sign Out</button>

</ng-template>

</amplify-authenticator>

//app.component.ts
//import code
import { Amplify } from ‘aws-amplify‘;
import outputs from ‘../../amplify_outputs.json‘;
import { AmplifyAuthenticatorModule, AuthenticatorService } from ‘@aws-amplify/ui-angular‘;

Amplify.configure(outputs);

@Component({
//other code
imports: [RouterOutlet, TodosComponent, AmplifyAuthenticatorModule],
})
export class AppComponent {
constructor(public authenticator: AuthenticatorService) {
Amplify.configure(outputs);
}
}

Connected Components and/or Feature Full

Sets up an Angular application with AWS Amplify Gen 2, integrating authentication and using Amplify connected components for UX patterns and working on implementing other features.