New Angular app with AWS Amplify

Start a new Angular application and configure to use AWS Amplify.

Reference: https://aws-amplify.github.io/docs/js/ionic

Prerequisites

• amplify
• ng

$ amplify --version
0.1.36

$ ng --version
Angular CLI: 7.1.3

Installation

$ ng new my-application
   ... answer ng prompts
$ cd my-application
$ npm install --save aws-amplify
$ npm install --save aws-amplify-angular

Setup the AWS Backend

$ amplify init
   ... answer amplify prompts
$ amplify add auth
$ amplify status (optional: displays pending changes)
$ amplify push

Import and configure Amplify

Import the configuration file and configure Amplify in your main.ts file.

import Amplify from 'aws-amplify';
import amplify from './aws-exports';
Amplify.configure(amplify);

In your home page component src/app/app.module.ts, you can import Amplify modules as following:

import { AmplifyAngularModule, AmplifyService } from 'aws-amplify-angular';

@NgModule({
  ...
  imports: [
    ...
    AmplifyAngularModule
  ],
  ...
  providers: [
    ...
    AmplifyService
  ]
  ...
});

At this point ng serve will fail with errors.

Fixing Issues

Edit tsconfig.app.json and remove “types”: []
Reference: https://github.com/aws/aws-sdk-js#with-angular

Add the following to your polyfills.ts: (window as any).global = window;

Add the following script to your index.html tag:

<script>
    if (global === undefined) {
        var global = window;
    }
</script>

ng serve should work at this point.

Continue with authentication