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

cannot find module 'stream' aws-sdk
aws-sdk npm
aws-sdk-react
aws-sdk typescript
aws nodejs sdk
angular aws-sdk
global is not defined aws-sdk
unable to resolve aws-sdk/clients/lexruntime

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

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.

angular - integrating aws-sdk to angular2 gives ", 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":​  Installing FileReaderSync in Angular2. Ask Question Asked 3 years, 1 month ago. integrating aws-sdk to angular2 gives “Cannot find module 'stream'”

In src/tsconfig.app.json

Replacing

"types": []

with "types": ["node"]

will work in Angular 5.

aws-sdk, Alternatively, you can use AWS Amplify Library which extends AWS SDK and provides React Native UI components and CLI support to work with AWS services​. Edit: my VSCode does register the package because my intelissense is understanding what I am trying to do and typing the Discord classname gives me access to those classes, but for some reason they won’t load. Source: New feed Source Url integrating the discord api into Angular

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

Angular2 + S3 = Love (Deploy to cloud in 6 steps), Beginners guide to deploy Angular 2 app to Amazon S3. Full Stack Development Tutorial: Integrate AWS Lambda Serverless Service into Angular SPA. To Integrate Lex Chatbot install aws-sdk and types definition using npm. This provides JavaScript API for AWS services and gives you type definitions for node. npm install aws-sdk -S npm install --save-dev @types/node Since the aws-sdk assumes global to be present and this is removed from angular 6+ add the following to your pollyfil.ts file

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.

ERROR in node_modules/aws-sdk/lib/http_response.d.ts(1 , Would like to request additional documentation: a working demo project with Angular 2. I can't for the life of me get this SDK integrated! We're enabling mixing of Angular 1 and Angular 2 in the same application. You can mix Angular 1 and Angular 2 components in the same view. Angular 1 and Angular 2 can inject services across frameworks. Data binding works across frameworks.

Cannot get aws-sdk working with Angular2 · Issue #1337 · aws/aws , Setup and expose S3 bucket serving Angular 2 application. serving with CloudFront, the user is routed to the edge location that provides the  # Install the NPM packages cd aws-cognito-angular2-quickstart npm install # Run the app in dev mode npm start Creating AWS Resources. This sample application can be deployed to either Elastic Beanstalk or S3. S3 will host this application as a static site while Elastic Beanstalk gives you the capability of adding backend operations to the application.

Deploy Angular 2 + node.js website using AWS, Alternatively, you can use AWS Amplify Library which extends AWS SDK and provides React Native UI components and CLI support to work with AWS services​. Too long for a comment: I just took a like at an angular-cli package.json, and I see some differences. Note the import of @angular/compiler-cli.

Package, Angular 4 Amazon S3 example – How to upload File to S3 Bucket Amazon Simple Storage Service (Amazon S3) is object storage built to store and retrieve any amount of data from web or mobile. Amazon S3 is designed to make web-scale computing easier for developers.

Comments
  • This worked, but I don't understand why. Can anyone explain why this works?
  • 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.
  • @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
  • Would the downvoter please be so kind and explain what is wrong with my answer in their opinion? Thanks.
  • 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!"
  • aws-sdk provides its own type definitions, so you don't need @types/aws-sdk installed!
  • 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 (github.com/aws/aws-sdk-js). aws-sdk provides its own type definitions, so you don't need @types/aws-sdk installed!