How to use CryptoJS with Angular 2 and TypeScript in WebPack build environment?

Question

There are a whole bunch of questions around using the CryptoJS library with Angular 2 but most assume use of SystemJS and all seem out of date with the current version of TypeScript. Can anybody give clear, simple instructions on how to use the CryptoJS library with Angular 2 and TypeScript.

I've installed CryptoJS using npm install crypto-js.

I've tried the recommended typings install crypto.js --ambient --save but this simply gives a warning about --ambient being deprecated and to use --global instead.

I've used --global instead but that then gives an error saying no typings were available!

Any advice to someone new to WebPack, NodeJS AND TypeScript would be appreciated. I have the CryptoJS library installed under node_modules folder but any "sensible" attempts to "import" CryptoJS fail with "Module not found".

score 23 · Answer 1 · answered May 21 '18 at 07:12

23

Here is the simplest step-by-step install and using example (working in nativescript/typescript/angular project):

npm install crypto-js

then:

npm install --save @types/crypto-js

Import in some component:

import * as crypto from "crypto-js";

And use it:

crypto.DES.decrypt("Your secret", "YOUR_CRYPTO_KEY");

answered May 21 '18 at 07:12

Bruno Leitão

764
10
16

This way crashes for me in prod mode. I think there must be also included scripts – Vlad Nov 04 '18 at 12:11
I think you will end up with this issue https://github.com/angular/angular-cli/issues/11130#issuecomment-417726705. Correct me if I am wrong? – Joseph T F Feb 20 '19 at 04:37
There is no need for using --save flag when installing types, why not install them only for development? – Jiri Kralovec Mar 02 '20 at 11:46
1

This is working on Nativescript-vue as of today. Installed "crypto-js": "^3.3.0" - this version specifically because of this issue: https://github.com/brix/crypto-js/issues/256#issuecomment-585175130 – Keith OYS Aug 03 '21 at 16:52

Entronad · Answer 2 · 2020-09-17T08:29:34.340

5

The crypto-js package in npm has no built-in types and no longer maintained.

You can try this, Witch is maintained by me, the same as crypto-js with TypeScript support and ES6 module: https://www.npmjs.com/package/crypto-es.

edited Sep 17 '20 at 08:29

answered Jan 10 '20 at 05:29

Entronad

61
1
2

While this is a good answer, please consider disclosing that you are the author of the library in your answer. – Sajib Acharya Aug 21 '20 at 06:25
Thanks for your advice! I shall disclose that. – Entronad Sep 17 '20 at 08:29

score 2 · Accepted Answer · answered Dec 08 '16 at 11:33

2

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

Explanation:

--global CryptoJS is global module
dt~ The typings are inside DT repository: https://github.com/DefinitelyTyped/DefinitelyTyped
--save Because you want it to be stored inside typings.json, don't you?

answered Dec 08 '16 at 11:33

rzelek

3,975
1
33
35

Thanks. It was the "dt~" I was missing. It makes sense once you realise that the "source" the message is warning about is added by prefixing with the ~ The complete answer as to how to use CryptoJS with Angular2 and TypeScript was hidden in this "import" statement I found elsewhere. Other answers implying import {CryptoJS} from 'crypto-js' wouid work just failed. import * as CryptoJS from 'crypto-js'; – Ian Smith Dec 08 '16 at 12:46
You are totally right. I remember me having the same problems with `dt~` prefixes. The import problems you are having are related to angular-cli, because they were using SystemJS prevously. The first way of importing was valid for SystemJS setups. – rzelek Dec 08 '16 at 13:17
This creates a folder for cryptoJS, but the index.js says that global exports are not possible unless at top level. I scoured the web for a solution/alternative to this problem, but I couldn't really find a conclusive answer. It's the same starting situation for me as for the OP: I have CryptoJS installed in node_modules, but can't import it. To add, I can't install as global module because: `typings ERR! message Attempted to compile "crypto-js" as a global module, but it looks like an external modu le. You'll need to remove the global option to continue.` – Torsten N. Mar 23 '17 at 10:14
Seems like `crypto-js` typings are not global anymore (I am not sure, haven't used typings in a while). Consider asking separate question. Also, if you run typescript >2.0, check out `@types` (http://stackoverflow.com/questions/39261204/typings-vs-types-npm-scope). – rzelek Mar 23 '17 at 14:06
2

@Arek-Żelechowski is correct, you should now use `npm install --save @types/crypto-js` – Scott R. Frost Apr 04 '17 at 18:37
And how can we actually use it inside a component ? – Jainam Jhaveri May 25 '17 at 13:39

How to use CryptoJS with Angular 2 and TypeScript in WebPack build environment?

3 Answers3

Linked