Oct 20, 2019
2 min read
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-amplifyAdd 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);
