18

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.

1

4 Answers 4

13

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';
5
  • For my understanding, does that basically just trick typescript into thinking that there is an aws-sdk typings file to import (or rather it's the start of making a typing file, it just won't have anything useful to the actual aws-sdk when it comes to using the prefills and whatnot) May 7, 2016 at 12:51
  • declare module 'aws-sdk' { var foo:any; export = foo; } where to write this ? Mar 1, 2017 at 7:50
  • you'd write it anywhere that you declare type definitions. In alot of cases it would be a file that is loaded into the tsconfig files array Mar 3, 2017 at 12:51
  • 1
    Updated as the latest sdk ships with TypeScript support out of the box 🌹
    – basarat
    Mar 11, 2018 at 22:00
  • using it this way caused the final build size to increase by almost 2 MB and causes initial load issue.... still don't know the correct way, looking for solution for import * issue
    – MSD
    Jun 1, 2021 at 5:35
9

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.

3
  • i am using angular-cli, i can't find project.config.ts file Mar 1, 2017 at 7:47
  • where can I find the "the top of you JavaScript file"... I don't have any, 'cause, I'm using TypeScript... Mar 26, 2017 at 3:08
  • Can put it in a typescript file also, that works fine. Mar 27, 2017 at 4:13
7

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

3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.