New Angular app with AWS Amplify

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



  • amplify
  • ng
$ amplify --version
$ ng --version
Angular CLI: 7.1.3


$ 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';

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

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

  imports: [
  providers: [

At this point ng serve will fail with errors.

Fixing Issues

Edit and remove “types”: []

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

Add the following script to your index.html tag:

    if (global === undefined) {
        var global = window;

ng serve should work at this point.

Continue with authentication

Leave a Reply

Your email address will not be published.