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

Question

I tried these

• error TS2304: Cannot find name 'Buffer',
• https://github.com/aws/aws-sdk-js/issues/994 and
• Using aws-sdk with angular2

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
      }
    );
  }
}

Aldebaran

Answer 1

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.

Heinrike

This worked, but I don't understand why. Can anyone explain why this works? – Angulo

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. – Cartulary

@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 – Bookstand

@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/... – Aphasic

Answer 2

In src/tsconfig.app.json

Replacing

"types": []

with "types": ["node"]

will work in Angular 5.

Negrophobe

Answer 3

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"],

Thorlie

Answer 4

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.

Redbug

Would the downvoter please be so kind and explain what is wrong with my answer in their opinion? Thanks. – Redbug

I didn't down vote, but this might help "This is a stub types definition for aws-sdk (github.com/aws/aws-sdk-js). aws-sdk provides its own type definitions, so you don't need @types/aws-sdk installed!" – Whaleboat

aws-sdk provides its own type definitions, so you don't need @types/aws-sdk installed! – Misanthrope

npm i @types/aws-sdk --save-dev npm WARN deprecated @types/[email protected]: This is a stub types definition for aws-sdk (github.com/aws/aws-sdk-js). aws-sdk provides its own type definitions, so you don't need @types/aws-sdk installed! – Diametrically

Answer 5

In src/tsconfig-spec.json

Add

"node" in types

Nupercaine

Can you add reference? – Abdu

Just to clarify. This helps fixing the tests. add node is required in tsconfig as well – Githens