We have used the AWS Amplify CLI to add Auth to our application and we ran amplify push initializing the src/aws-exports.js configuration. Now we need to complete the remaining application scaffolding.

Approach

Update Package and Script

We created a script package that will automatically perform these steps. The NPM Repository README for instructions.

API Installation

npm install aws-amplify

Enable Loading of Javascript

In order to load aws-exports.js enable the loading of Javascript files in tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true
    ...
   }
}

Add Node Compiler Types

Update tsconfig.app.json with:

"compilerOptions": {
    ....
    "types": ["node"]
},

Allow Javascript

Update tsconfig.json with the allowJs option, as the aws-exports.js file is a Javascript file and Angular flag it otherwise:

"compilerOptions": {
    "allowJs": true,
    ...
},

Update Polyfills

Update src/polyfills.ts:

(window as any).global = window;
(window as any).process = {
  env: { DEBUG: undefined },
};

Update index.html

Add this script tag to the <head> element:

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

Configure AWS Amplify

Within src/main.ts add the configuration for Auth:

import Auth from '@aws-amplify/auth';
import AWSConfig from './aws-exports';
Auth.configure(AWSConfig);

We are now ready to use the Amplify Auth within our application.

API

If adding API that also has to be configured.

If not you will get the error API not configured.

To add configuration for API do the following:

import { API } from 'aws-amplify';
API.configure(AWSConfig)

Getting Angular Ready for AWS Amplify | Task

Scenario