How to import non-core npm modules in Angular 2, for example. (use encryption library)?

Question

In my Angular 2 application (SystemJS module manager, Typescript as a scripting language) I need to import the npm module for encryption processing (either Crypto-JS; Forge-JS, or any other serving purpose)

In the case of CryptoJS , after installing through npm install *, I tried to add:

<script src="node_modules/crypto-js/crypto-js.js"></script> 

in index: html .

In my service ( app / services / my-service.service.ts ) I import it through

  import {CryptoJS} from 'node_modules/crypto-js/crypto-js.js' // or /aes.js --> same issue 

However, the import does not work correctly, for example,

  console.log(CryptoJS); 

outputs undefined .

I also tried adding the module path to

  System.config({ // ... map: { CryptoJS } } 

and import it into my service

  import {CryptoJS} from 'cryptoJs'; 

While I'm not sure that what I should add to SystemJS configuration , none of the solutions I tried worked.

EDIT I also tried ...

 // import ... as to overcome no default export import * as CryptoJS from 'node_modules/crypto-js/crypto-js.js'; 

but then

  console.log(CryptoJS.); 

doesn't give any AES / any method (my editor usually advises which methods I can use with autocomplete)

Thanks to the contributions of Thierry and PierreDuc, EDIT 2 makes it clear that typing and importing modules are unrelated concepts.

However, none of them work. This is what I did:

I downloaded the CryptoJS typing file , put it in typings / cryptojs / cryptojs.d.ts

Then i added

  /// <reference path="cryptojs/cryptojs.d.ts"/> 

before typings / main.d.ts

Then I added crypto to the SystemJS map configuration:

  cryptojs: "node_modules/crypto-js/crypto-js.js" 

Finally, I tried to import cryptojs into my service

  import CryptoJS from 'cryptojs' 

As far as I can see, there are 2 problems:

• Typics do not load, because there is no autocomplete when I try to import the module (I also tried to restart the Angular 2 application). Perhaps I did not understand how to import external typing?
• the module is still not loaded, I see that using console.log (cryptojs) (nothing is printed, even undefined; hardly my previous attempts)

EDIT 3

Finally, I got the import, thanks to the advice of Thierry and PierreDuc (not sure what went wrong in the first place). However, I still have type problems.

Despite the fact that I put

  /// <reference path="../../typings/cryptojs/cryptojs.d.ts"/> 

directly in my service when I write

  import CryptoJS from 'cryptojs'; 

just below this line, I have no autocomplete, and when I start the Angular 2 application using npm start ; I get the following error and the application does not start

  app/services/user.service.ts(6,22): error TS2307: Cannot find module 'cryptojs'. 

NOTE If I add cryptojs to the SystemJS configuration (but not a) and then write (without import)

 console.log(CryptoJS.AES.encrypt('my message', 'secret key123').toString()); 

it just works, but I would rather solve the problems with type + import.

Answer 1

You can try this, since the library is compatible with CommonJS in the main HTML file:

 System.config({ map: { cryptojs: 'node_modules/crypto-js/crypto-js.js' }, (...) }); 

and import it as follows:

 import CryptoJS from 'cryptojs'; 

For the compilation part, you can follow Pierre's suggestion.

Edit

I did some tests, and here's how to do it.

• Set typing for crypto-js:

   $ typings install --ambient crypto-js 

• Include the appropriate vise in the ts file:

   /// <reference path="../typings/main/ambient/crypto-js/crypto-js.d.ts"/> import {Component} from 'angular2/core'; (...) 

• Set up the library in SystemJS in the main HTML file:

   <script> System.config({ map: { 'crypto-js': 'node_modules/crypto-js/crypto-js.js' }, (...) }); </script> 

• Import the library into ts files:

   import CryptoJS from 'crypto-js'; 

Answer 2

I managed to get CryptoJS to work in an Angular2 project generated using angular-cli with the following steps / configuration:

bash

 npm install crypto-js --save typings install crypto-js --ambient --save 

angular-cli-build.js

 module.exports = function(defaults) { return new Angular2App(defaults, { vendorNpmFiles: [ /* ... */ 'crypto-js/**/*.+(js|js.map)' ] }); }; 

system.config.ts

 /** Map relative paths to URLs. */ const map: any = { 'crypto-js': 'vendor/crypto-js' }; /** User packages configuration. */ const packages: any = { 'crypto-js': { defaultExtension: 'js', main: 'index.js', format: 'cjs' } }; 

some.component.ts

 import * as CryptoJS from 'crypto-js'; 

This was the only setting that I could work with for both regular build and -prod build. I understand that this question was not specifically about angular-cli, but decided that I would answer it anyway if it helps someone else.

Answer 3

The answers import the entire crypto-js library, which leads to bloating the application if you use only its small bits.

I want my application to be as neat as possible, so this is my approach:

install via NPM

 npm install core-js@3.1.6 

systemjs.config.js

 System.config({ map:{ 'crypto-js': 'node_modules/crypto-js', ... }, packages:{ 'crypto-js': {main: './index.js', defaultExtension: 'js', format: 'cjs'}, ... } }); 

component.ts

 //only the core + the modules you need import CryptoJS from 'crypto-js/core'; import 'crypto-js/sha1'; 

This has several disadvantages. Shortcut methods do not work for me:

does not work

 let hash = CryptoJS.SHA1('abcdefghi'); // CryptoJS.SHA1 is undefined 

working

 let sha1 = CryptoJS.algo.SHA1.create(); sha1.update("abcdefghi"); let hash = sha1.finalize(); 

To avoid the "Could not find module x" compiler error, I needed to add the following to custom.typings.d.ts

 declare module 'crypto-js/core' 

Then a typing link from my main.ts

 ///<reference path="./app/custom.typings.d.ts"/> 

The main drawback is that the typicalities mentioned in other answers do not seem to work with this approach, because they are intended for the entire crypto-js library. For example, CryptoJS.algo not recognized. So it really sucks, but I don't have intellisense / autocomplete in the IDE

So, why put such a flaw? While the entire library adds about 60 kilobytes of mini-JS to my application, importing only what I need adds 4.5kb. And this victory is for me.

Answer 4

To install the cryptojs package, run the following command:

npm install crypto-js --save

After installation is complete, if you are using webpack / bundles or updated versions of angularjs, run the following command to get the declaration files.

npm install --save @ types / crypto-js

D.ts files will be added to @types node_modules to resolve the import error for cryptojs. It worked for me.

Answer 5

When I tried to run:

typings install --ambient crypto-js

I got an error:

typing ERR! The outdated "ambient" flag is out of date. Use "global" instead

Instead, putting this line in the typings.json file, it worked.

"crypto-js": "registry: dt / crypto-js # 3.1.4 + 20160505170201"