Question

我试图让我的Name应用允许我在我的AWS账户上读取和写入s3存储桶。

在Angular2（以及大多数其他内容）中，我们使用了AngularJS，因此我假设同样的事情也可以为aws-sdk完成。

我遇到的问题是让Angular2正确导入我的项目。

我已通过aws-sdk

安装了它

我尝试使用

导入它

npm install aws-sdk

但它一直告诉我该模块不存在。

我的项目基于angular2-seed。

我还尝试使用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'从DefinitleyTyped安装typings文件，但也失败了。

我不确定是否需要添加任何其他内容才能使其正常工作。

另外，我使用的是typescript

感谢您的时间和帮助。

Answer 1

来自NPM上的aws-sdk文档（https://www.npmjs.com/package/aws-sdk）

使用TypeScript

AWS SDK for JavaScript捆绑TypeScript定义文件，以便在TypeScript项目中使用，并支持可读取.d.ts文件的工具。我们的目标是保持这些TypeScript定义文件随每个版本更新为任何公共API。

<强>先决条件在开始在项目中使用这些TypeScript定义之前，您需要确保您的项目满足以下一些要求：

使用TypeScript v2.x
包含节点的TypeScript定义。您可以使用npm通过在终端窗口中键入以下内容来安装它：

npm install --save-dev @types/node

您的tsconfig.json或jsconfig.json包括＆＃39; dom＆＃39;并且＆＃39; es2015.promise＆＃39;在compilerOptions.lib下。有关示例，请参阅tsconfig.json。

在浏览器中
要在前端项目中将TypeScript定义文件与全局AWS对象一起使用，请将以下行添加到您打算使用它的JavaScript或Typescript文件的顶部，或将其添加到您的tsconfig＆＃39;类型＆＃39 ;或声明文件：

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

这将为全局AWS对象提供支持。

上一个答案
我发现如果我添加了

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

到project.config.ts中的additional_deps（如果你使用angular2-seed）或者只是添加

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

到你的index.html 然后我可以添加

declare const AWS: any;

对于我需要的任何.ts文件，我可以访问AWS对象。但不确定这是否是一个好的解决方案。

Answer 2

但它一直告诉我该模块不存在。

将TypeScript和aws-sdk更新为最新版本。在您的tsconfig中，请确保您拥有moduleResolution: node。现在你可以做到：

import * as AWS from 'aws-sdk';

Answer 3

我也尝试使用带有角度2（角度cli生成）项目的aws-sdk。我无法在浏览器中正确加载lib。

根据angluar doc我导入了aws libaries（https://github.com/angular/angular-cli/wiki/3rd-party-libs#adding-underscore-library-to-your-project）。

这看起来像这样：

编辑package.json以将NPM文件从NPM加载到本地系统

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

编辑angluar-cli-build.js以在构建过程中将aws JS文件复制到dist的供应商文件夹

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

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

编辑system-config.ts中的map部分以将命名空间映射到目标文件

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

在我的打字稿文件中，我尝试导入AWS库。

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

@Injectable()
export class MyService { 

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

这对于打字稿编译器来说都很好，源文件也会在浏览器中加载，但会导致错误，例如＆＃34; S3不是构造函数＆＃34;。

如果你调试这些东西，你会看到AWS的东西被初始化很好，但在＆＃34;导入*作为AWS之后，来自＆＃39; aws-sdk＆＃39;＆＃34;执行var AWS是用一些疯狂的对象初始化的。

因此我的解决方案是：

编辑package.json以将NPM文件从NPM加载到本地系统

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

编辑angluar-cli-build.js以在构建过程中将aws JS文件复制到dist的供应商文件夹

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

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

将脚本导入到index.html

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

最终在您的服务中使用它

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

@Injectable()
export class MyService { 

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

这是一种混合方式。使用Angluar 2构建过程，使用NPM包管理但不使用AWS打字稿类型定义。

Answer 4

1）请通过添加以下内容来更新 /src/polyfills.ts ：

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

2），然后使用以下命令更新位于 /src/tsconfig.app.json 中的 compilerOptions 对象：

"types": ["node"]

3）安装aws-sdk：

npm install aws-sdk

4）现在，您应该可以在* .ts文件中使用AWS开发工具包：

    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）不要对您的凭据进行硬编码，请查看 Setting Credentials in a Web Browser 以获取更多信息，谢谢

使用带有angular2的aws-sdk

4 个答案: