将 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

But it keeps telling me that the module doesn't exist.

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

import * as AWS from 'aws-sdk';

Answer 2

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

TypeScript 的用法

适用于 JavaScript 的 AWS 开发工具包捆绑了用于 TypeScript 项目的 TypeScript 定义文件，并支持可以读取 .d.ts 文件的工具。我们的目标是让这些 TypeScript 定义文件在任何 public api.

的每个版本中更新。

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

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

npm install --save-dev @types/node

您的 tsconfig.json 或 jsconfig.json 包括 'dom' 和 'es2015.promise' 在 compilerOptions.lib 下。有关示例，请参阅 tsconfig.json。

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

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

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

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

看起来像这样：

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

{
      ...
      "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'
    ]
  });
};

编辑系统中的映射部分-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();
        ...
        ...
        ...

这对打字稿编译器来说没问题，源文件也在浏览器中加载，但会导致错误，如 "S3 is not a constructor"。

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

因此我的解决方案是：

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

{
      ...
      "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 类型定义。

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 SDK 了：

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

将 aws-sdk 与 angular2 一起使用

Using aws-sdk with angular2

typescript

aws-sdk

angular