在 Angular 2 项目中导入 crypto-js（使用 angular-cli 创建）答案

【问题标题】：Import crypto-js in an angular 2 project (created with angular-cli)在 Angular 2 项目中导入 crypto-js（使用 angular-cli 创建）
【发布时间】：2016-07-20 11:12:12
【问题描述】：

我正在尝试在我的 angular2 项目中导入 crypto-js。

我关注了几个 SO 问题以及 angular-cli guide，但最后我仍然遇到错误 Cannot find module 'crypto-js'

我尝试了什么：

npm install crypto-js --save

和

typings install dt~crypto-js --global --save

然后我修改了文件angular-cli-build.js

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'crypto-js/**/*.+(js|js.map)'
    ]
  });
};

和文件 src/system-config.ts

const map: any = {
    'crypto-js': 'vendor/crypto-js'
};

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

使用后

import * as CryptoJS from 'crypto-js';

我的错误仍然存在。我错过了什么吗？

谢谢

【问题讨论】：

stackblitz.com/edit/encrypt-decrypt-app 看看这个例子

标签： angular cryptojs

【解决方案1】：

这可能会对您有所帮助：
https://github.com/Uisli21/SecureAngularLogin

$ npm install crypto-js --save
$ npm install @types/crypto-js --save-dev

然后：

import * as CryptoJS from 'crypto-js';

或

import CryptoJS = require('crypto-js');

【讨论】：

【解决方案2】：

您可以尝试以下解决方案：

1. npm install --save @types/crypto-js


2. import { AES } from "crypto-js";


3. AES.encrypt('my message', 'secret key');

【讨论】：

我使用 SHA3，我发现：import { SHA3 } from "crypto-js"; 使 dist.js 比import * as SHA3 from 'crypto-js/sha3'; 有点胖。大约 100KB。我不知道为什么。

【解决方案3】：

好的，我明白了。我只是在typings/crypto-js/ 中下载DefinitelyTyped 文件，然后在导入CryptoJS 之前添加/// <reference path="../../typings/crypto-js/crypto-js.d.ts" /> 行。

【讨论】：

该链接不起作用...我使用link 并将该文件添加到：node_modules/crypto-js 然后在我导入的类中：import * as CryptoJS from '../../ ../node_modules/crypto-js'

【解决方案4】：

将此添加到您的 Package.JSON 文件中。

"browser": {
    "crypto": false
}

这样做会在您运行 ng serve 时告诉您的应用程序不要捆绑您的 Crypto 库以提供给浏览器。

【讨论】：

【解决方案5】：

安装cryto-js & @types/crypto-js 后在angular-cli.json文件中添加脚本路径

"scripts": [
    "../node_modules/crypto-js/crypto-js.js"
]

【讨论】：