typescript 将 aws-sdk 与 angular2 一起使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37041049/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using aws-sdk with angular2
提问by Nicholas Tsaoucis
I'm trying to get my Angular2app to allow me to read and write to an s3 bucket on my AWS account.
我正在尝试让我的Angular2应用程序允许我读取和写入我的 AWS 账户上的 s3 存储桶。
In AngularJS(and most other things) we used the aws-sdkso I'm assuming that the same thing will be able to be done for Angular2also.
在AngularJS（和大多数其他事情）我们使用了aws-sdk所以我假设同样的事情也可以做Angular2。
The problem I'm having though is getting the aws-sdkto import correctly into my project.
我遇到的问题是如何aws-sdk正确导入到我的项目中。
I've installed it via npm install aws-sdk
我已经安装了它 npm install aws-sdk
I've tried to import it using
我尝试使用导入它
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'
but it keeps telling me that the module doesn't exist.
但它一直告诉我该模块不存在。
My project is based off the angular2-seed.
我的项目基于 angular2-seed。
I also tried to install the typings file from DefinitleyTyped using typings install aws-sdkbut that failed also.
我还尝试使用 DefinitleyTyped 安装打字文件，typings install aws-sdk但也失败了。
I'm not sure about if I need to add anything else in order for it to work or not.
我不确定是否需要添加任何其他内容才能使其正常工作。
Also, I'm using typescript
另外，我正在使用打字稿
Thanks for your time and assistance.
感谢您的时间和帮助。
采纳答案by basarat
But it keeps telling me that the module doesn't exist.
但它一直告诉我该模块不存在。
Update TypeScript and aws-sdk to latest. In your tsconfig make sure you have moduleResolution: node. Now you can simply do:
将 TypeScript 和 aws-sdk 更新到最新版本。在你的 tsconfig 中确保你有moduleResolution: node. 现在你可以简单地做：
import * as AWS from 'aws-sdk';
回答by Nicholas Tsaoucis
From the aws-sdk docs on NPM (https://www.npmjs.com/package/aws-sdk)
来自 NPM 上的 aws-sdk 文档 ( https://www.npmjs.com/package/aws-sdk)
Usage with TypeScript
与 TypeScript 一起使用
The AWS SDK for JavaScript bundles TypeScript definition files for use in TypeScript projects and to support tools that can read .d.ts files. Our goal is to keep these TypeScript definition files updated with each release for any public api.
适用于 JavaScript 的 AWS 开发工具包捆绑了 TypeScript 定义文件，以便在 TypeScript 项目中使用并支持可以读取 .d.ts 文件的工具。我们的目标是让这些 TypeScript 定义文件随任何公共 api 的每个版本更新。
Pre-requisitesBefore you can begin using these TypeScript definitions with your project, you need to make sure your project meets a few of these requirements:
先决条件在您开始在您的项目中使用这些 TypeScript 定义之前，您需要确保您的项目满足以下一些要求：
Use TypeScript v2.x
Includes the TypeScript definitions for node. You can use npm to install this by typing the following into a terminal window:
使用 TypeScript v2.x
包括节点的 TypeScript 定义。您可以使用 npm 通过在终端窗口中键入以下内容来安装它：
npm install --save-dev @types/node
Your tsconfig.jsonor jsconfig.jsonincludes 'dom' and 'es2015.promise' under compilerOptions.lib. See tsconfig.jsonfor an example.
您tsconfig.json或jsconfig.json在 compilerOptions.lib 下包含“dom”和“es2015.promise”。参见tsconfig.json示例。
In the Browser
To use the TypeScript definition files with the global AWS object in a front-end project, add the following line to the top of your JavaScript or Typescript file where you intend to use it or add it to your tsconfig 'types' or Declarations file:
在浏览器中
要在前端项目中将 TypeScript 定义文件与全局 AWS 对象一起使用，请将以下行添加到您打算使用它的 JavaScript 或 Typescript 文件的顶部，或将其添加到您的 tsconfig 'types' 或声明文件：
/// <reference types="aws-sdk" />
This will provide support for the global AWS object.
这将为全局 AWS 对象提供支持。
Previous Answer
I found that if I added
上一个答案
我发现如果我添加
{ src: 'aws-sdk/dist/aws-sdk', inject: 'libs' }
to the additional_deps in the project.config.ts (if your using angular2-seed) or just add
到 project.config.ts 中的 additional_deps（如果您使用 angular2-seed）或只是添加
<script src="/node_modules/aws-sdk/dist/aws-sdk.js"></script>
to your index.html Then I could add
到你的 index.html 然后我可以添加
declare const AWS: any;
To any of the .ts files I needed, I have access to the AWS object. Not sure if this is a good solution however.
对于我需要的任何 .ts 文件，我都可以访问 AWS 对象。但是，不确定这是否是一个好的解决方案。
回答by Sma Ma
i also try to use aws-sdk with angular 2 (angular cli generated) project. i was not able to load the libs correct in the browser.
我还尝试将 aws-sdk 与 angular 2（生成的 angular cli）项目一起使用。我无法在浏览器中正确加载库。
according to the angluar doc i was import the aws libaries (https://github.com/angular/angular-cli/wiki/3rd-party-libs#adding-underscore-library-to-your-project).
根据angluar doc，我导入了aws 库（https://github.com/angular/angular-cli/wiki/3rd-party-libs#adding-underscore-library-to-your-project）。
this looks like this:
这看起来像这样：
edit package.json to load JS file from NPM to local system
编辑 package.json 将 JS 文件从 NPM 加载到本地系统
{
...
"dependencies": {
"aws-sdk": "git://github.com/aws/aws-sdk-js.git#support/typescript"
},
...
}
edit angluar-cli-build.js to copy aws JS files during build process to vendor folder of dist
编辑 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'
]
});
};
edit map section in system-config.ts to map namespace to destination file
编辑 system-config.ts 中的 map 部分以将命名空间映射到目标文件
const map: any = {
'aws-sdk': 'vendor/aws-sdk/dist/aws-sdk.js'
};
in my typescript file i try to import the AWS libs.
在我的打字稿文件中，我尝试导入 AWS 库。
...
import * as AWS from 'aws-sdk';
...
@Injectable()
export class MyService {
public myMethod() {
var s3 = new AWS.S3();
...
...
...
this is all fine for typescript compiler, the source file is also loaded in the browser but it result in the error like "S3 is not a constructor".
这对于打字稿编译器来说都很好，源文件也被加载到浏览器中，但会导致“S3不是构造函数”之类的错误。
if you debug the stuff you will see that the AWS stuff is initialized fine but after the "import * as AWS from 'aws-sdk'" is executed the var AWS is initialized with some crazy object.
如果您调试这些东西，您会看到 AWS 的东西初始化得很好，但是在执行“import * as AWS from 'aws-sdk'”之后，var AWS 用一些疯狂的对象初始化。
therefor my solution is:
因此我的解决方案是：
edit package.json to load JS file from NPM to local system
编辑 package.json 将 JS 文件从 NPM 加载到本地系统
{
...
"dependencies": {
"aws-sdk": "git://github.com/aws/aws-sdk-js.git#support/typescript"
},
...
}
edit angluar-cli-build.js to copy aws JS files during build process to vendor folder of dist
编辑 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'
]
});
};
add import of script to index.html
将脚本的导入添加到 index.html
<script src="/vendor/aws-sdk/dist/aws-sdk.js" type="text/javascript"></script>
finaly use it in your service
最后在您的服务中使用它
// make AWS as 'any' available for typescript compiler
declare var AWS:any;
@Injectable()
export class MyService {
public myMethod() {
var s3= new AWS.S3();
...
...
...
This is a mixed way. Use Angluar 2 build process, use NPM package management but do not use AWS typescript type definitions.
这是一种混合方式。使用 Angluar 2 构建过程，使用 NPM 包管理但不使用 AWS 打字稿类型定义。
回答by p4309027
1) Please update /src/polyfills.tsby adding:
1) 请通过添加以下内容来更新/src/polyfills.ts：
// aws-sdk requires global to exist
(window as any).global = window;
2) then update compilerOptionsobject located in /src/tsconfig.app.jsonwith:
2) 然后使用以下内容更新位于/src/tsconfig.app.json 中的compilerOptions对象：
"types": ["node"]
3) Install aws-sdk:
3）安装aws-sdk：
npm install aws-sdk
4) now you should be able to use AWS SDK in your *.ts file:
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) Don'thard code your credentials, check Setting Credentials in a Web Browserfor more info, thanks
5)不要硬编码您的凭据，请查看在 Web 浏览器中设置凭据以获取更多信息，谢谢
