Ionic 2 import libraries - ionic2

Question

I am trying to implement crypto-js with Ionic 2.
I have done the following:
npm install crypto-js
typings install dt~crypto-js --global --save
My index.d.ts now contains:
/// <reference path="globals/crypto-js/index.d.ts" />
A crypto-js folder has been created under ./typings/global
I then try the following code:
declare var require: any;
import * as CryptoJS from 'crypto-js';
...
private CryptoJS: any;
constructor() {
this.CryptoJS = require("crypto-js");
}
test() {
alert(this.CryptoJS);
}
As soon as I try reference this.CryptoJS (i.e alert(this.CryptoJS)) the app crashes.
I am doing something wrong in the way I import the crypto-js libraries. Please can anyone advise?
Thanks
UPDATE:
following this, I run:
>npm install --save #types/cryptojs
npm WARN package.json theWhoZoo# No repository field.
npm WARN package.json theWhoZoo# No README data
npm WARN package.json theWhoZoo# No license field.
#types/cryptojs#3.1.29 node_modules\#types\cryptojs
How do I import CryptoJS in the code?
Thanks
UPDATE:
import { Injectable } from "#angular/core";
import { LanguageModel } from './languageModel';
import { LocationModel } from './locationModel';
import { JobModel } from './jobModel';
import 'crypto-js';
#Injectable()
export class PersonModel {
public id: number = null;
public joiningDate: number = null;
public lastAccessDate: number = null;
public userName: string = null;
public password: string = null;
public firstName: string = null;
public lastName: string = null;
public emailAddress: string = null;
public locations: LocationModel[] = [];
public languages: LanguageModel[] = [];
public time: string = null;
public avatar: string = null;
public avatar64: string = null;
//private CryptoJS: any;
private SECERET_KEY: string = 'secret key 123';
public getPasswordEcrypted(): string {
// Decrypt
var bytes = CryptoJS.AES.decrypt(this.password.toString(), this.SECERET_KEY);
var plaintext = bytes.toString(CryptoJS.enc.Utf8);
console.log('getPasswordEcrypted', plaintext);
return plaintext;
}
public setPasswordEncrypted(password: string): void {
// Encrypt
alert(password);
console.log('setPasswordEncrypted', password, CryptoJS);
alert(CryptoJS);
var ciphertext = CryptoJS.AES.encrypt(password, this.SECERET_KEY);
alert(ciphertext);
console.log('setPasswordEncrypted', password, ciphertext);
this.password = ciphertext;
}
}
UPDATE:
Changing to:
import CryptoJS from 'crypto-js';
results in:
UPDATE:
Running this:
typings install dt~crypto-js --global --save
results in no build errors, but at run time when CryptoJS is accessed (e.g. console.log(CryptoJS);), the app crashes.

Answer 1

Here is the solution for this.
After you install the npm libraries
npm install crypto-js #types/cryptojs --save
Create a declaration.d.ts file under src and add declaration to the module. This resolves your module undefined issue.
declare module 'crypto-js';
Within the service class itself add the import CrytoJS from the module like this:
import CryptoJS from 'crypto-js';
Now in your code you can reference CryptoJS. For, example:
let obj = CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA256(['abcd', this.config.salt].join(':'), this.config.salt));
console.log(obj);
outputs:
t2eCyUuZMKRNTRqCW0L5KRvMjWhLV887h1ehjCNSr2c=

Answer 2

I don't know if this subject is closed or not and i've just solved the same problem for me, so...
Actually, it seems like you just have to install crytpoJS with :
npm install crypto-js --save
And import the precise file/library you want to use with :
import { SHA3 } from "crypto-js"; // SHA3 one-way encryption
import { AES } from 'crypto-js'; // For AES encryption/decryption
import { enc } from 'crypto-js'; // For characters encodages types (Utf-8, latin1...)
Now you can use CryptoJs functions by using directly the name of imported library :
//AES
let encrypted = AES.encrypt('my message', 'secret key 123');
let bytes = AES.decrypt(encrypted.toString(), 'secret key 123');
let decrypted = bytes.toString(enc.Utf8);
//SHA
let hash = SHA3('password', { outputLength: 224 }).toString()
Maybe it'll help someone, some day...
Regards.

Answer 3

You were right to switch to types because ionic uses #types and not typings.
First of all
import * as CryptoJS from 'crypto-js';
Should be
import 'crypto-js';
In this specific case crypto js is not a proper node module so the import is to the general file
There is also no require in typescript unless you installed it, instead you have import. So this doesn't make sense:
this.CryptoJS = require("crypto-js");
This declares an empty variable of any:
private CryptoJS: any;
If you translate it to javascript it would look like this:
var CryptoJS;
So this is basically very much redundant. You already have the variable from the import
In Summary this should be your code:
import CryptoJS from 'crypto-js';
class SomeClass{
test(){
alert(CryptoJS);
}
}