Getting Angular Ready for AWS Amplify

Photo by Joanna Kosinska on Unsplash

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

Founder of Firefly Semantics Corporation

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

7 Reasons Why Facebook’s React Native Wins Over Google’s Flutter

JavaScript: What Features Were Released In 2020?

AngularJs. Vs. NodeJs. Vs. ReactJs: Which Is The Best Choice in 2021?

Photoshop Automation using JavaScript #2 — Working with Layers

Copy text to Clipboard using vue-clipboard2 — Vue.js

Javascript Task Runners Explained

Wading through TICKscript documentation

Fullscreen the Material Sidenav Container

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

More from Medium

Quick styling, Bootstrap 5 final and Angular 13

Advice Generator App(Frontend Mentor)

Generating CompoDoc for the Firefly Semantics Slice Angular Todo Application

Angular 13: Server Side Form Validations in Ant Design