Ionic 2 import libraries

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/[email protected] 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=