encryption - 如何在 Angular 2 中导入非核心 npm 模块，例如(使用加密库)？

Question

在我的 Angular 2 应用程序(SystemJS 模块管理器，Typescript 作为脚本语言)中，我需要导入一个 npm 模块来处理加密(Crypto-JS；Forge-JS 或任何其他用于此目的的模块)

对于 CryptoJS，在通过 npm install 安装后 * 我尝试添加:

  <script src="node_modules/crypto-js/crypto-js.js"></script>

在 index:html 中。

在我的服务中 (app/services/my-service.service.ts) 我通过

导入它

  import {CryptoJS} from 'node_modules/crypto-js/crypto-js.js' // or /aes.js --> same issue

但是导入不能正常工作，例如

 console.log(CryptoJS);

打印未定义。

我也试过添加模块路径

 System.config({
     // ...
     map: {
        CryptoJS
    }
}

并将其导入到我的服务中

 import {CryptoJS} from 'cryptoJs';

虽然我不确定我应该在 SystemJS 配置中实际放置什么，但我尝试过的解决方案都没有奏效。

编辑我也试过...

// import ... as to overcome no default export
import * as CryptoJS from 'node_modules/crypto-js/crypto-js.js';

然后

 console.log(CryptoJS.); 

不提供 AES/任何方法(我的编辑通常建议我可以通过自动完成使用哪些方法)

编辑 2 现在感谢 Thierry 和 PierreDuc 的贡献，很明显类型化和模块导入是未链接的概念。

但是它们都不起作用。这就是我所做的:

我下载了CryptoJS typings file , 把它放在 typings/cryptojs/cryptojs.d.ts

然后我添加了

  /// <reference path="cryptojs/cryptojs.d.ts"/>

到typings/main.d.ts

然后我在 SystemJS 的 map 配置中添加了 cryptojs:

   cryptojs: "node_modules/crypto-js/crypto-js.js"

最后我尝试通过以下方式在我的服务中导入 cryptojs

  import CryptoJS from 'cryptojs'

据我所知有两个问题:

• 输入没有加载，因为当我尝试导入模块时没有自动完成(我还尝试重新启动 Angular 2 应用程序)。也许我不明白如何导入外部类型？
• 模块无论如何都没有加载，我可以通过 console.log(cryptojs) 看到(没有打印任何内容，甚至没有未定义的；不太可能是我之前的尝试)

编辑 3

感谢 Thierry 和 PierreDuc 的建议，我终于让导入正常工作了(不确定首先出了什么问题)。但是我仍然遇到打字问题。

尽管我放了

  /// <reference path="../../typings/cryptojs/cryptojs.d.ts"/>

直接在我的服务中，当我写的时候

  import CryptoJS from 'cryptojs';

就在该行下方，我没有自动完成，当我通过 npm start 重新启动 Angular 2 应用程序时；我收到以下错误并且应用程序无法启动

  app/services/user.service.ts(6,22): error TS2307: Cannot find module 'cryptojs'.

注意:如果我将 cryptojs 添加到 SystemJS 配置(但不是 a )然后编写(没有任何导入)

console.log(CryptoJS.AES.encrypt('my message', 'secret key123').toString());

它确实有效，但我宁愿解决打字 + 导入问题。

Answer 1

你可以试试这个，因为这个库在你的主 HTML 文件中是 CommonJS 兼容的:

System.config({
  map: {
    cryptojs: 'node_modules/crypto-js/crypto-js.js'
  },
  (...)
});

并以这种方式导入:

import CryptoJS from 'cryptojs';

对于编译部分，你可以按照皮埃尔的建议。

编辑

我做了一些测试，下面是方法。

• 为 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 文件中:

  import CryptoJS from 'crypto-js';