Ionic 2 import libraries

ionic import
ionic 3.9 2
import ionic css
ionic framework v3
ionic framework docs native
ionic v5
ionic guide
ionic documentations

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.


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=

Importing external libraries - ionic-v3, I'm building a new app with Ionic2 rc1 and I'm having trouble using a couple external libraries as described here:  Ionic 2 and External Libraries. Now that Ionic 2 is out in beta, people are setting aside some time to give it a shot and investigate everything it has to offer. Ionic 2 and Angular 2 bring a lot of improvements, but it’s a fairly different style of developing that what people were used to before.


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.

How to Install 3rd Party Libraries in Ionic 2, Ionic 2 allows you to do a wide range of things right out of the box, but a library has been installed, you can usually import it into components  Ionic 2 allows you to do a wide range of things right out of the box, but there is likely going to come a time where you need to install some 3rd party library to add additional functionality into your applications.


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);
        }
}

Ionic 2 and External Libraries, Now, since everything needs to be imported and libraries aren't global, import {​Page} from 'ionic-framework/ionic'; @Page({ templateUrl:  There are a few ways to do this, but we’re going to take a look at how to include your favorite vanilla JavaScript libraries in an Ionic 2 TypeScript project. The Requirements. There are a few requirements to make what comes next possible: Node.js 4+ Ionic 2 CLI; The Android SDK, Xcode, or Both


Ionic 2 import libraries, 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  Including third party libraries (like lodash) for Ionic 2 using TypeScript setup #4986


Using External Libraries with Angular 2, If you've started to play around with Angular 2 you might come to the After having imported the module, you can use the underscore library in  But Ionic uses TypeScript, there is an additional step to the process. Since TypeScript utilizes static types, we need to be able to “describe” code we want to use and import. TypeScript does this through type definitions.


How to import/require a npm module · Issue #8274 · ionic-team/ionic , I read that on TS 2 I should import using the new ES syntax like import * as See https://github.com/driftyco/ionic-third-party-lib-example  After installing the library, we must import it into our code to use it. Import statements can follow two simple patterns: using a named export and using a default export. The best practice is to use the named export pattern whenever possible. If it doesn’t work correctly, fall back to the default export.