Getting Angular Ready for AWS Amplify

Updated Version

There’s an updated version of this article here:

Scenario

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

API Installation

npm install aws-amplify

Add Node Compiler Types

Update tsconfig.app.json with:

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

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 Bonus

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)

Configure All Categories

Heads up. This used to work, but it did not on September 10th 2020:

Configure all categories in one swoop like this:

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

Related

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation