将 aws-sdk 与 angular2 一起使用

Question

我正在尝试让我的 Angular2 应用程序允许我读取和写入我的 AWS 账户上的 s3 存储桶。

在AngularJS（和大多数其他东西）中，我们使用了aws-sdk，所以我假设Angular2 也可以做同样的事情。

我遇到的问题是让aws-sdk 正确导入到我的项目中。

我已经通过npm install aws-sdk安装了它

我尝试使用

导入它

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'

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

我的项目基于 angular2-seed。

我还尝试使用 typings install aws-sdk 从 DefinitleyTyped 安装类型文件，但也失败了。

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

另外，我正在使用打字稿

感谢您的时间和帮助。

Answer 1

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 了解更多信息，谢谢

Answer 2

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

将 TypeScript 和 aws-sdk 更新到最新版本。在你的 tsconfig 中确保你有moduleResolution: node。现在你可以简单地做：

import * as AWS from 'aws-sdk';

Answer 3

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

与 TypeScript 一起使用

适用于 JavaScript 的 AWS 开发工具包捆绑了 TypeScript 定义文件，以便在 TypeScript 项目中使用并支持可以读取 .d.ts 文件的工具。我们的目标是让这些 TypeScript 定义文件随着任何公共 api 的每次发布而更新。

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

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

npm install --save-dev @types/node

您的tsconfig.json 或jsconfig.json 在compilerOptions.lib 下包含“dom”和“es2015.promise”。示例见tsconfig.json。

在浏览器中
要将 TypeScript 定义文件与前端项目中的全局 AWS 对象一起使用，请将以下行添加到您打算使用它的 JavaScript 或 Typescript 文件的顶部，或者将其添加到您的 tsconfig 'types' 或 Declarations 文件中：

/// <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 4

我还尝试将 aws-sdk 与 angular 2（生成的 angular cli）项目一起使用。我无法在浏览器中正确加载库。

根据角度文档，我正在导入 aws 库 (https://github.com/angular/angular-cli/wiki/3rd-party-libs#adding-underscore-library-to-your-project)。

看起来像这样：

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

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

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

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

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

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

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();
        ...
        ...
        ...

这对于 typescript 编译器来说没问题，源文件也在浏览器中加载，但会导致“S3 不是构造函数”之类的错误。

如果你调试这些东西，你会看到 AWS 的东西初始化得很好，但是在执行“import * as AWS from 'aws-sdk'”之后，var AWS 会被一些疯狂的对象初始化。

因此我的解决方案是：

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

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

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

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 typescript 类型定义。