Typescript 将aws sdk与angular2一起使用

我正在尝试让我的

Angular2

应用程序允许我读写AWS帐户上的s3存储桶

在

AngularJS

（以及大多数其他内容）中，我们使用了

aws sdk

，因此我假设同样的事情也可以在

Angular2

中完成

但我遇到的问题是如何将

aws sdk

正确导入到我的项目中

我已经通过npm安装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种子

我还尝试使用

typings install aws sdk

从definitelytyped安装typings文件，但也失败了

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

另外，我使用的是typescript

谢谢你的时间和帮助

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

将TypeScript和aws sdk更新至最新版本。在tsconfig中，确保您有

moduleResolution:node

。现在，您只需执行以下操作：

import * as AWS from 'aws-sdk';

---

来自NPM（）上的aws sdk文档

使用TypeScript

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

先决条件 在开始对项目使用这些类型脚本定义之前，您需要确保项目满足以下几个要求：

使用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”或声明文件中：

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

添加到project.config.ts中的其他_deps（如果您使用angular2种子），或者只添加

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

对于我需要的任何.ts文件，我都可以访问AWS对象。

---

但是，不确定这是否是一个好的解决方案。

我还尝试将aws sdk用于angular 2（angular cli生成）项目。我无法在浏览器中正确加载LIB

根据angluar文档，我正在导入aws库（）

这看起来像这样：

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

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

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

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

在我的typescript文件中，我尝试导入AWS LIB

...
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"
      },
      ...
}

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

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>

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

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

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

2） 然后使用以下内容更新/src/tsconfig.app.json中的编译器选项对象：

"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） 不要对您的凭证进行硬编码，请查看了解更多信息，谢谢

我的理解，这是否只是欺骗typescript，使其认为有一个aws sdk打字文件要导入（或者更确切地说，这是创建一个类型文件的开始，在使用前缀和诸如此类的东西时，它对实际的aws sdk没有任何用处）声明模块“aws sdk”{var foo:any；export=foo；}在哪里编写？您可以在声明类型定义的任何地方编写它。在许多情况下，它将是加载到tsconfig文件阵列中的文件，随着最新sdk附带的TypeScript支持的开箱即用，使用这种方式会导致最终生成大小增加近2MB，并导致初始加载问题…仍然不知道我不知道正确的方法，正在寻找导入的解决方案*问题AWS的官方Typescript即将发布…希望…我正在使用angular cli，我找不到project.config.ts文件我在哪里可以找到“TheTopofYou JavaScript文件”…我没有，因为，我正在使用Typescript…也可以将其放入Typescript文件中，这很好。