如何在 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 或任何其他用途)

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)

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

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>

在index:html中.

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

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);

打印未定义.

我也尝试在

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

并将其导入到我的服务中

and importing it in my service by

 import {CryptoJS} from 'cryptoJs';

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

While I'm not sure what I should actually put in SystemJS config, none of the solutions I tried worked.

编辑我也试过...

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

然后

 console.log(CryptoJS.); 

没有给出 AES/任何方法(我的编辑通常会建议我可以通过自动完成使用哪些方法)

gives no AES/whatever method (my editor usually advices which methods I could use via auto-completion)

EDIT 2 现在感谢 Thierry 和 PierreDuc 的贡献，很明显类型和模块导入是未关联的概念.

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:

我下载了 CryptoJS 类型文件，把它在typings/cryptojs/cryptojs.d.ts

I downloaded CryptoJS typings file, put it in typings/cryptojs/cryptojs.d.ts

然后我添加了

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

到typings/main.d.ts

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

Then I added cryptojs in SystemJS's map config:

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

最后我尝试通过

  import CryptoJS from 'cryptojs'

据我所知，有两个问题:

As far as I see there are 2 issues:

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

编辑 3

由于 Thierry 和 PierreDuc 的建议，我终于让导入工作了(不知道首先出了什么问题).但是我仍然有打字的问题.

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.

尽管我把

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

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

directly in my service, when I write

  import CryptoJS from 'cryptojs';

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

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'.

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

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.

推荐答案

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

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'
  },
  (...)
});

并以这种方式导入:

import CryptoJS from 'cryptojs';

编译部分可以参考皮埃尔的建议.

For the compilation part, you can follow the Pierre's suggestion.

编辑

我做了一些测试，这是做的方法.

I made some tests and here is the way to do.

• 为 crypto-js 安装类型:

• Install typings for crypto-js:

$ typings install --ambient crypto-js

在您的 ts 文件中包含相应的类型:

Include the corresponding typings into your ts file:

/// <reference path="../typings/main/ambient/crypto-js/crypto-js.d.ts"/>

import {Component} from 'angular2/core';
(...)

在主 HTML 文件中的 SystemJS 中配置库:

Configure the library in SystemJS in your main HTML file:

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

将库导入您的 ts 文件:

Import the library into your ts files:

import CryptoJS from 'crypto-js';

这篇关于如何在 Angular 2 中导入非核心 npm 模块，例如(使用加密库)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！