Import crypto-js in an angular 2 project (created with angular-cli)

Question

I'm trying to import crypto-js in my angular2 project.

I followed several SO questions and also angular-cli guide, but at the end I still have the error Cannot find module 'crypto-js'

What I tried :

npm install crypto-js --save

and

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

then I modified the file 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)'
    ]
  });
};

and the file src/system-config.ts

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

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

After using

import * as CryptoJS from 'crypto-js';

I still have my error. Did I miss something ?

Thanks

https://stackblitz.com/edit/encrypt-decrypt-app check this example — Nikhil K S, Feb 26 '19 at 09:00

WesDev · Answer 1 · 2022-08-28T13:50:09.833

29

This may help you:

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

then:

import * as CryptoJS from 'crypto-js';

or

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

edited Aug 28 '22 at 13:50

answered Nov 17 '16 at 11:23

WesDev

564
5
7

zjx · Answer 2 · 2017-11-16T07:46:03.940

3

You can try following as a solution:

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


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


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

edited Nov 16 '17 at 07:46

answered Nov 16 '17 at 06:42

zjx

56
5

1

I use SHA3 and I find out that: `import { SHA3 } from "crypto-js";` makes the dist.js a little fat than `import * as SHA3 from 'crypto-js/sha3';`. It's about 100KB. I don't know why. – Catscarlet Jan 08 '18 at 09:54

Greg · Accepted Answer · 2016-12-23T20:48:44.077

0

Ok I got it. I just download the DefinitelyTyped file in typings/crypto-js/ and then I add the line /// <reference path="../../typings/crypto-js/crypto-js.d.ts" /> before importing CryptoJS.

edited Dec 23 '16 at 20:48

answered Jul 20 '16 at 12:50

Greg

792
2
9
24

That link doesnt work... I used [link](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/4869992bc079b88280b9ff91213528904109e8ae/crypto-js) and added that files in: node_modules/crypto-js then on my class I imported: import * as CryptoJS from '../../../node_modules/crypto-js' – antonio Dec 20 '16 at 00:49

score 0 · Answer 4 · answered Jun 16 '20 at 12:16

0

Add this to your Package.JSON file.

"browser": {
    "crypto": false
}

Doing so will tell your application when you run ng serve to not to bundle your Crypto library to serve to the browser.

answered Jun 16 '20 at 12:16

Vibhor Dube

4,173
1
22
32

score 0 · Answer 5 · edited Jul 24 '20 at 14:39

0

Add the script path in angular-cli.json file after installing cryto-js & @types/crypto-js

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

edited Jul 24 '20 at 14:39

António Ribeiro

4,129
5
32
49

answered Jul 24 '20 at 12:28

Tameezuddin Mohammad

1
1

Import crypto-js in an angular 2 project (created with angular-cli)

5 Answers5

Linked