Start a new Angular application and configure to use AWS Amplify.
Reference: https://aws-amplify.github.io/docs/js/ionic
Prerequisites
$ amplify --version
0.1.36
$ ng --version
Angular CLI: 7.1.3
Installation
$ 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';
Amplify.configure(amplify);
In your home page component src/app/app.module.ts, you can import Amplify modules as following:
import { AmplifyAngularModule, AmplifyService } from 'aws-amplify-angular';
@NgModule({
...
imports: [
...
AmplifyAngularModule
],
...
providers: [
...
AmplifyService
]
...
});
At this point ng serve will fail with errors.
Fixing Issues
Edit tsconfig.app.json and remove “types”: []
Reference: https://github.com/aws/aws-sdk-js#with-angular
Add the following to your polyfills.ts: (window as any).global = window;
Add the following script to your index.html tag:
<script>
if (global === undefined) {
var global = window;
}
</script>
ng serve should work at this point.
Continue with authentication