integrating aws-sdk to angular2 gives "Cannot find module 'stream'"

Question

I tried these

My typings and @types/node seems to have been installed properly. Here are error details:

ERROR in /Users/ishandutta2007/Documents/Projects/myproj/node_modules/aws-sdk/lib/http_response.d.ts (1 ,25): Cannot find module 'stream'.) /Users/ishandutta2007/Documents/Projects/myproj/node_modules/aws-sdk/lib/http_response.d.ts (14,18): Cannot find name 'Buffer'.)

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

package.json

{
  "name": "reactvidsangular",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "webpack-dev-server --port=4200",
    "build": "webpack",
    "test": "karma start ./karma.conf.js",
    "lint": "ng lint",
    "e2e": "protractor ./protractor.conf.js",
    "prepree2e": "npm start",
    "pree2e": "webdriver-manager update --standalone false --gecko false --quiet"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.66",
    "angular2-social-login": "^2.1.0",
    "aws-sdk": "^2.32.0",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "mystartup_commons": "bitbucket:ishan_dutta/mystartup_commons",
    "ng2-bootstrap": "^1.4.2",
    "rxjs": "^5.1.0",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-rc.4",
    "@angular/compiler-cli": "^2.4.0",
    "autoprefixer": "^6.5.3",
    "codelyzer": "~2.0.0",
    "css-loader": "^0.26.1",
    "cssnano": "^3.10.0",
    "exports-loader": "^0.6.3",
    "file-loader": "^0.10.0",
    "istanbul-instrumenter-loader": "^2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "json-loader": "^0.5.4",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-sourcemap-loader": "^0.3.7",
    "less-loader": "^2.2.3",
    "postcss-loader": "^0.13.0",
    "postcss-url": "^5.1.2",
    "protractor": "~5.1.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^4.1.1",
    "script-loader": "^0.7.0",
    "source-map-loader": "^0.1.5",
    "style-loader": "^0.13.1",
    "stylus-loader": "^2.4.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.0.0",
    "url-loader": "^0.5.7",
    "webpack-dev-server": "~2.3.0"
  }
}

app.component.ts

declare module 'aws-sdk' {
   var foo:any;
   export = foo;
}

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

@Component({selector: 'app-basic', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})
export class AppComponent {
  countReactions(myprefix) {
    var s3 = new AWS.S3();
    var params = {
      Bucket: 'mybucket',
      Prefix: myprefix,
    };
    s3.listObjectsV2(params, function (err, data) {
      if (err) 
        console.log(err, err.stack); // an error occurred
      else 
        console.log(data); // successful response
      }
    );
  }
}

score 50 · Answer 1 · edited Mar 03 '21 at 04:52

50

Adding "node" to types in tsconfig.app.json file that the angular-cli creates in the src directory as below:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": ["node"]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Based on these TypeScript docs:

Specify "types": [] to disable automatic inclusion of @types packages

Since types is empty, it is excluding the node typings that you installed via npm install @types/node.

edited Mar 03 '21 at 04:52

V Maharajh

9,013
5
30
31

answered Apr 13 '17 at 20:38

Steve Farwell

520
3
5

6

This worked, but I don't understand why. Can anyone explain why this works? – NineBlindEyes Apr 17 '17 at 20:54
4

Thanks, just make sure that it's the txconfig.app.json file in the `src` directory, not the `tsconfig.json` file in the project root. – Blake Mumford Mar 01 '18 at 04:01
@BlakeMumford That's a very good point. I didn't pay attention at first and kept updating the wrong file as their names are very similar – Volkan Paksoy Mar 11 '18 at 07:45
@NineBlindEyes, `Buffer`, and many other classes, are provided by the node runtime. If you run the code in the browser for example, many of these classes will not exist. Therefore you need to let typescript know that you expect your code to run on node. You typically do this by installing @types/node from npm/yarn. However the angular tsconfig comes with a types of `[]` which tells typescript to ignore everything in @types, so you need to explicitly add it (Perhaps you can alternatively get rid of the `types : []`) so that it uses the types in @types/... – V Maharajh Mar 03 '21 at 04:57

score 6 · Answer 2 · edited Sep 19 '18 at 06:59

6

In src/tsconfig.app.json

Replacing

"types": []

with "types": ["node"]

will work in Angular 5.

edited Sep 19 '18 at 06:59

giveJob

1,500
3
17
29

answered Apr 01 '18 at 03:58

ArunDhwaj IIITH

3,833
1
24
14

score 4 · Answer 3 · answered Jun 21 '18 at 13:35

I had similar issue while using aws-sdk-js.

Reason for this issue is because of node types. This is what I did

npm install --save @types/node
npm install --save @types/aws-sdk

Add this line under compilerOptions in tsconfig.json

"typeRoots": ["node_modules/@types"],

score 2 · Answer 4 · edited Sep 25 '17 at 18:47

2

I found a solution for me.

You need to install the typing definitions for aws-sdk:

npm install --save-dev @types/aws-sdk

I got some errors about invalid peer dependencies from npm during that, but it worked anyway.

You might get another error when compiling your application though, stating that the import syntax used in aws-sdk is not compatible with ECMAScript2015. I had to change compilerOptions.module to "es5" instead of "es2015" in my tsconfig.app.json to get it to work finally.

edited Sep 25 '17 at 18:47

Will Shaver

12,471
5
49
64

answered Apr 07 '17 at 11:50

Byte Commander

6,506
6
44
71

Would the downvoter please be so kind and explain what is wrong with my answer in their opinion? Thanks. – Byte Commander Apr 17 '17 at 21:15
I didn't down vote, but this might help "This is a stub types definition for aws-sdk (https://github.com/aws/aws-sdk-js). aws-sdk provides its own type definitions, so you don't need @types/aws-sdk installed!" – Eddie Jaoude Aug 05 '17 at 15:39
aws-sdk provides its own type definitions, so you don't need @types/aws-sdk installed! – abedfar Sep 19 '17 at 01:22
npm i @types/aws-sdk --save-dev npm WARN deprecated @types/aws-sdk@2.7.0: This is a stub types definition for aws-sdk (https://github.com/aws/aws-sdk-js). aws-sdk provides its own type definitions, so you don't need @types/aws-sdk installed! – davyzhang Apr 02 '18 at 01:25

score 1 · Answer 5 · answered May 10 '21 at 08:45

1

In src/tsconfig-spec.json

Add

"node" in types

answered May 10 '21 at 08:45

Raj

11
2

Can you add reference? – andreyunugro May 10 '21 at 09:44
Just to clarify. This helps fixing the tests. add node is required in tsconfig as well – Maddy Jan 21 '22 at 12:37

integrating aws-sdk to angular2 gives "Cannot find module 'stream'"

5 Answers5