如何在Angular 2中导入非核心npm模块，例如（使用加密库）？ [英] How to import non-core npm modules in Angular 2 e.g. (to use an encryption library)?
问题描述
在我的Angular 2应用程序（SystemJS模块管理器，Typescript作为脚本语言）中，我需要导入一个npm模块来处理加密（Crypto-JS; Forge-JS或任何其他服务目的）
在 CryptoJS 的情况下，通过 npm安装 *安装后，我尝试添加：
< script src =node_modules / crypto-js / crypto-js.js>< / script>
in index：html 。
在我的服务（ app / services / my-service.service.ts ）中，我通过
<$ p $来自'node_modules / crypto-js / crypto-js.js'//或/aes.js - >的p>
import {CryptoJS}相同的问题
但导入无法正常工作，例如
console.log（CryptoJS）;
打印未定义。
$ b $我也试图在
System.config（{
// ..）中添加模块路径。
地图：{
CryptoJS
}
}
并通过
从cryptoJs导入{CryptoJS};
虽然我不确定我应该把它放在SystemJS配置中，但我尝试的解决方案都没有
编辑我也试过...
// import ...以克服没有默认导出
import *作为CryptoJS从'node_modules / crypto-js / crypto-js.js';
，然后
console.log（CryptoJS。 ）;
不提供AES /任何方法（我的编辑通常建议我可以通过auto-完成）
E DIT 2 现在感谢Thierry和PierreDuc的贡献，很明显，打字和模块导入是未链接的概念。
然而，他们都没有工作。这是我所做的：
我下载了 CryptoJS打字文件，将其放在打字/ cryptojs / cryptojs.d.ts中
然后我添加了
///< reference path =cryptojs / cryptojs.d.ts/>
to typings / main.d.ts
然后我在SystemJS的映射配置中添加了cryptojs：
cryptojs：node_modules / crypto-js /crypto-js.js
最后我试图通过
导入我的服务中的cryptojs 从'cryptojs'导入CryptoJS
据我所见，有两个问题：
- 打印没有加载，因为当我尝试使用自动完成导入模块（我也尝试重新启动Angular 2应用程序）。也许我不明白如何导入外部打字？
- 模块没有加载，我可以看到由console.log（cryptojs）（没有打印，甚至不定义;
编辑3
最后我感谢Thierry和PierreDuc的建议（不知道第一个出了什么问题）进口工作。
但是我仍然有打字的问题。
尽管我把
///< reference path =../../ typings / cryptojs / cryptojs.d.ts/>
直接在我的服务中，当我写
从'cryptojs'导入CryptoJS;
在该行下方，我没有自动完成，当我启动Angular 2应用程序时，由 npm开始;我收到以下错误，该应用程序不开始
app / services / user.service.ts（6,22） ：错误TS2307：找不到模块'cryptojs'。
注意：如果我将cryptojs添加到SystemJS配置（但不是）然后写（不用导入）
console.log（CryptoJS.AES.encrypt（'my message'，'secret key123 ）的ToString（））;
它只是工作，但我宁愿解决打字+导入问题。
您可以尝试这个，因为库在您的主要HTML文件中符合CommonJS标准：
System.config（{
map：{
cryptojs：'node_modules / crypto-js / crypto-js.js'
}，
（...）
}）;
并以这种方式导入：
从'cryptojs'导入CryptoJS;
对于编译部分，您可以按照Pierre的建议。
修改
我做了一些测试，这里是要做的。
-
安装crypto-js的打字：
$ typings install --ambient crypto-js
-
在ts文件中包含相应的输入：
///< reference path =../ typings / main / ambient / crypto-js / crypto-js.d.ts />
import {Component} from'angular2 / core';
（...）
-
在主HTML中的SystemJS中配置库文件：
< script>
System.config（{
map：{
'crypto-js'：'node_modules / crypto-js / crypto-js.js'
}，
...）
}）;
< / script>
-
将库导入您的ts文件：
从'crypto-js'导入CryptoJS;
In my Angular 2 app (SystemJS module manager, Typescript as scripting language) I need to import a npm module to handle encryption (either Crypto-JS;Forge-JS or any other serving the purpose)
In the case of CryptoJS, after installing it via npm install * I tried by adding:
<script src="node_modules/crypto-js/crypto-js.js"></script>
in index:html.
The in my service (app/services/my-service.service.ts) I import it via
import {CryptoJS} from 'node_modules/crypto-js/crypto-js.js' // or /aes.js --> same issue
However the import doesn't work correctly as for example
console.log(CryptoJS);
prints undefined.
I also tried to add the module path in
System.config({
// ...
map: {
CryptoJS
}
}
and importing it in my service by
import {CryptoJS} from 'cryptoJs';
While I'm not sure what I should actually put in SystemJS config, none of the solutions I tried worked.
EDIT I also tried...
// import ... as to overcome no default export
import * as CryptoJS from 'node_modules/crypto-js/crypto-js.js';
but then
console.log(CryptoJS.);
gives no AES/whatever method (my editor usually advices which methods I could use via auto-completion)
EDIT 2 now thanks to Thierry and PierreDuc contribution it is clear that typings and module import are unlinked concepts.
However neither of them is working. This is what I've done:
I downloaded CryptoJS typings file, put it in typings/cryptojs/cryptojs.d.ts
Then I added
/// <reference path="cryptojs/cryptojs.d.ts"/>
to typings/main.d.ts
Then I added cryptojs in SystemJS's map config:
cryptojs: "node_modules/crypto-js/crypto-js.js"
Finally I tried to import cryptojs in my service by
import CryptoJS from 'cryptojs'
As far as I see there are 2 issues:
- typings are not loaded since there is no autocompletion when I try to import the module (I also tried to restart the Angular 2 app). Perhaps I didn't understand how to import external typings?
- the module is not loaded anyway, I can see that by console.log(cryptojs) (nothing is printed, not even undefined; unlikely my previous attempts)
EDIT 3
Finally I got the import working thanks to Thierry and PierreDuc advice (not sure what went wrong on the first place). However I still have issues with typings.
Despite I put
/// <reference path="../../typings/cryptojs/cryptojs.d.ts"/>
directly in my service, when I write
import CryptoJS from 'cryptojs';
just below that line, I get no autocompletion and when I start Angular 2 app over by npm start ; I get the following error and the app doesn't start
app/services/user.service.ts(6,22): error TS2307: Cannot find module 'cryptojs'.
NOTE: If I add cryptojs to SystemJS config (but not a ) and then write (without any import)
console.log(CryptoJS.AES.encrypt('my message', 'secret key123').toString());
it just works but I'd rather solve the typings + import issues.
You could try this since the library is CommonJS-compliant in your main HTML file:
System.config({
map: {
cryptojs: 'node_modules/crypto-js/crypto-js.js'
},
(...)
});
and import it this way:
import CryptoJS from 'cryptojs';
For the compilation part, you can follow the Pierre's suggestion.
Edit
I made some tests and here is the way to do.
Install typings for crypto-js:
$ typings install --ambient crypto-jsInclude the corresponding typings into your ts file:
/// <reference path="../typings/main/ambient/crypto-js/crypto-js.d.ts"/> import {Component} from 'angular2/core'; (...)Configure the library in SystemJS in your main HTML file:
<script> System.config({ map: { 'crypto-js': 'node_modules/crypto-js/crypto-js.js' }, (...) }); </script>Import the library into your ts files:
import CryptoJS from 'crypto-js';
这篇关于如何在Angular 2中导入非核心npm模块，例如（使用加密库）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
