Question

在我的Angular 2应用程序（SystemJS模块管理器，作为脚本语言的Typescript）中，我需要导入一个npm模块来处理加密（Crypto-JS; Forge-JS或任何其他服务用途）

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

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

索引：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 /任何方法（我的编辑通常建议我可以通过自动完成使用哪种方法）

EDIT 2 现在感谢Thierry和PierreDuc的贡献，很明显，打字和模块导入是无关联的概念。

然而，他们都没有工作。这就是我所做的：

我已下载CryptoJS typings file，将其放入typings / cryptojs / cryptojs.d.ts

然后我添加了

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

到 typings / main.d.ts

然后我在SystemJS的地图配置中添加了cryptoj：

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

最后，我试图通过

在我的服务中导入cryptojs

  import CryptoJS from 'cryptojs'

据我所知，有两个问题：

打印不加载。也许我不明白如何导入外部输入？
无论如何都没有加载模块，我可以通过console.log（cryptojs）看到（没有打印，甚至没有未定义;不太可能是我以前的尝试）

编辑3

最后我得到了导入工作，感谢Thierry和PierreDuc的建议（不确定首先出了什么问题）。但是我仍然有打字问题。

尽管我把

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

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

  import CryptoJS from 'cryptojs';

就在那条线下面，我没有自动完成，当我通过 npm start 启动Angular 2 app时我收到以下错误，应用程序无法启动

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

Answer 2

我能够使用angular-cli生成的Angular2项目中的CryptoJS工作，具有以下步骤/配置：

<强>的bash

npm install crypto-js --save
typings install crypto-js --ambient --save

<强>角-CLI-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      /* ... */
      'crypto-js/**/*.+(js|js.map)'
    ]
  });
};

<强> system.config.ts

/** Map relative paths to URLs. */
const map: any = {
  'crypto-js': 'vendor/crypto-js'
};

/** User packages configuration. */
const packages: any = {
  'crypto-js': {
    defaultExtension: 'js',
    main: 'index.js',
    format: 'cjs'
  }
};

<强> some.component.ts

import * as CryptoJS from 'crypto-js';

这是我可以为常规版本和-prod版本工作的唯一设置。我意识到这个问题并不是专门针对angular-cli的，但我认为无论如何我都会回答它，以防它帮助其他人。

Answer 3

答案导入整个npm install core-js@3.1.6库，如果你只使用它的一小部分就会使应用程序膨胀。

我希望尽可能地修改我的应用，所以这是我的方法：

通过NPM安装

System.config({
    map:{
        'crypto-js':  'node_modules/crypto-js',
        ...
    },
    packages:{
        'crypto-js': {main: './index.js', defaultExtension: 'js', format: 'cjs'},
        ...
    }
});

<强> systemjs.config.js

//only the core + the modules you need
import CryptoJS from 'crypto-js/core';
import 'crypto-js/sha1';

<强> component.ts

let hash = CryptoJS.SHA1('abcdefghi'); // CryptoJS.SHA1 is undefined

但这有几个缺点。快捷方式对我不起作用：

不起作用

let sha1 = CryptoJS.algo.SHA1.create();
sha1.update("abcdefghi");
let hash = sha1.finalize();

<强>工作原理

"Could not find module x"

为避免编译错误declare module 'crypto-js/core'，我需要将以下内容添加到 custom.typings.d.ts

///<reference path="./app/custom.typings.d.ts"/>

然后链接到我的 main.ts

中的输入内容

crypto-js

主要缺点是其他答案中提到的打字似乎不适用于这种方法，因为它们适用于整个CryptoJS.algo库。例如，query.findObjectsInBackground { (objects:[PFObject]?, error:Error?)' in无法识别。所以它真的很糟糕但我在IDE中没有intellisense / autocomplete

那么为什么会有这样的缺点呢？整个库为我的应用程序添加了大约60kb的缩小JS，导入我需要的内容增加了4.5kb。这对我来说是个胜利。

Answer 4

要安装cryptojs包，请运行以下命令：

npm install crypto-js --save

如果您使用webpack / bundles或更新的angularjs版本完成上述安装后，请运行以下命令以获取声明文件。

npm install --save @ types / crypto-js

在node_modules的@types中，将添加d.ts文件以解决cryptojs的导入相关错误。这对我有用。

Answer 5

当我试图跑步时：

typings安装 - 框架加密-js

我收到了错误：

打字ERR！ deprecated不推荐使用“ambient”标志。请改用“global”而不是

相反，将此行放在typings.json文件中，它有效。

“crypto-js”：“registry：dt / crypto-js＃3.1.4 + 20160505170201”

如何在Angular 2中导入非核心npm模块，例如（使用加密库）？

5 个答案: