Using aws-sdk with angular2

Question

I'm trying to get my Angular2 app to allow me to read and write to an s3 bucket on my AWS account.

In AngularJS (and most other things) we used the aws-sdk so I'm assuming that the same thing will be able to be done for Angular2 also.

The problem I'm having though is getting the aws-sdk to import correctly into my project.

I've installed it via npm install aws-sdk

I've tried to import it using

import * as AWS from 'aws-sdk/dist/aws-sdk',
import * as AWS from 'aws-sdk',
import AWS from 'aws-sdk'
import AWS from 'aws-sdk/dist/aws-sdk'

but it keeps telling me that the module doesn't exist.

My project is based off the angular2-seed.

I also tried to install the typings file from DefinitleyTyped using typings install aws-sdk but that failed also.

I'm not sure about if I need to add anything else in order for it to work or not.

Also, I'm using typescript

Thanks for your time and assistance.

Answer 1

1) Please update /src/polyfills.ts by adding:

// aws-sdk requires global to exist
(window as any).global = window;

2) then update compilerOptions object located in /src/tsconfig.app.json with:

"types": ["node"]

3) Install aws-sdk:

npm install aws-sdk

4) now you should be able to use AWS SDK in your *.ts file:

    import * as AWS from 'aws-sdk';
    ...
    export class YourComponent implements OnInit {
      constructor() { }

      ngOnInit() {
      }

      doSmthingWithAwsSdk(){
         AWS.config.credentials = new AWS.Credentials(accessKeyId, secretAccessKey, sessionToken);
         AWS.config.region = region;
         // do something
      }
     ...
    }

5) Don't hard code your credentials, check Setting Credentials in a Web Browser for more info, thanks

Answer 2

But it keeps telling me that the module doesn't exist.

Update TypeScript and aws-sdk to latest. In your tsconfig make sure you have moduleResolution: node. Now you can simply do:

import * as AWS from 'aws-sdk';

Answer 3

From the aws-sdk docs on NPM (https://www.npmjs.com/package/aws-sdk)

Usage with TypeScript

The AWS SDK for JavaScript bundles TypeScript definition files for use in TypeScript projects and to support tools that can read .d.ts files. Our goal is to keep these TypeScript definition files updated with each release for any public api.

Pre-requisites Before you can begin using these TypeScript definitions with your project, you need to make sure your project meets a few of these requirements:

Use TypeScript v2.x
Includes the TypeScript definitions for node. You can use npm to install this by typing the following into a terminal window:

npm install --save-dev @types/node

Your tsconfig.json or jsconfig.json includes 'dom' and 'es2015.promise' under compilerOptions.lib. See tsconfig.json for an example.

In the Browser
To use the TypeScript definition files with the global AWS object in a front-end project, add the following line to the top of your JavaScript or Typescript file where you intend to use it or add it to your tsconfig 'types' or Declarations file:

/// <reference types="aws-sdk" /> 

This will provide support for the global AWS object.

Previous Answer
I found that if I added

{ src: 'aws-sdk/dist/aws-sdk', inject: 'libs' } 

to the additional_deps in the project.config.ts (if your using angular2-seed) or just add

<script src="/node_modules/aws-sdk/dist/aws-sdk.js"></script>

to your index.html Then I could add

declare const AWS: any;

To any of the .ts files I needed, I have access to the AWS object. Not sure if this is a good solution however.

Answer 4

i also try to use aws-sdk with angular 2 (angular cli generated) project. i was not able to load the libs correct in the browser.

according to the angluar doc i was import the aws libaries (https://github.com/angular/angular-cli/wiki/3rd-party-libs#adding-underscore-library-to-your-project).

this looks like this:

edit package.json to load JS file from NPM to local system

{
      ...
      "dependencies": {
        "aws-sdk": "git://github.com/aws/aws-sdk-js.git#support/typescript"
      },
      ...
}

edit angluar-cli-build.js to copy aws JS files during build process to vendor folder of dist

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...
      'aws-sdk/**/*.js'
    ]
  });
};   

edit map section in system-config.ts to map namespace to destination file

const map: any = {
  'aws-sdk': 'vendor/aws-sdk/dist/aws-sdk.js'
};

in my typescript file i try to import the AWS libs.

...
import * as AWS from 'aws-sdk';
...

@Injectable()
export class MyService { 

    public myMethod() { 
        var s3 = new AWS.S3();
        ...
        ...
        ...

this is all fine for typescript compiler, the source file is also loaded in the browser but it result in the error like "S3 is not a constructor".

if you debug the stuff you will see that the AWS stuff is initialized fine but after the "import * as AWS from 'aws-sdk'" is executed the var AWS is initialized with some crazy object.

therefor my solution is:

edit package.json to load JS file from NPM to local system

{
      ...
      "dependencies": {
        "aws-sdk": "git://github.com/aws/aws-sdk-js.git#support/typescript"
      },
      ...
}

edit angluar-cli-build.js to copy aws JS files during build process to vendor folder of dist

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...
      'aws-sdk/**/*.js'
    ]
  });
}; 

add import of script to index.html

<script src="/vendor/aws-sdk/dist/aws-sdk.js" type="text/javascript"></script>

finaly use it in your service

// make AWS as 'any' available for typescript compiler
declare var AWS:any;

@Injectable()
export class MyService { 

    public myMethod() { 
        var s3= new AWS.S3();
        ...
        ...
        ...

This is a mixed way. Use Angluar 2 build process, use NPM package management but do not use AWS typescript type definitions.