Come importare i moduli NPM non core in Angular 2 ad es. (usare una libreria di crittografia)?

Question

Nel mio angolare 2 app (SystemJS Module Manager, Carattere tipografico come linguaggio di scripting) ho bisogno di importare un modulo NPM di gestire la crittografia (sia cripto-JS; Forge-JS o di qualsiasi altro ha lo scopo)

Nel caso di CryptoJS, dopo l'installazione tramite npm installare * ho provato aggiungendo:

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

in index: html.

Il mio servizio (app/servizi/mia-service.service.ts) ho importare tramite

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

Tuttavia l'importazione non funziona correttamente, come ad esempio

console.log(CryptoJS); 

stampe undefined.

Ho anche cercato di aggiungere il percorso del modulo in

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

e importarlo nel mio servizio da

import {CryptoJS} from 'cryptoJs'; 

Mentre io non sono sicuro di cosa devo effettivamente messo in SystemJS config nessuna delle soluzioni che ho provato ha funzionato.

EDIT Ho provato anche ...

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

ma poi

console.log(CryptoJS.); 

dà nessun AES/qualunque metodo (il mio editore di solito Consigli utili quali metodi potrei usare tramite auto-completamento)

EDIT 2 ora grazie a contributo Thierry e PierreDuc è chiaro che t typings e module import sono concetti non collegati.

Tuttavia nessuno di loro funziona. Questo è quello che ho fatto:

Ho scaricato CryptoJS typings file, lo mise in tipizzazioni/cryptojs/cryptojs.d.ts

Poi ho aggiunto

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

a tipizzazioni/main.d.ts

poi ho aggiunto cryptojs nella mappa di configurazione di SystemJS:

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

Alla fine ho cercato di importare cryptojs nel mio servizio da

import CryptoJS from 'cryptojs' 

Per quanto vedo ci sono 2 problemi:

• le tipizzazioni non vengono caricate poiché non vi è alcun completamento automatico quando si tenta di importare il modulo (anche io provato a riavviare l'app Angular 2). Forse non ho capito come importare digitazioni esterne?
• il modulo non viene caricato in ogni caso, vedo che da console.log (cryptojs) (non viene stampato nulla, nemmeno indefinito; improbabili miei precedenti tentativi)

EDIT 3

Infine Ho ottenuto l'importazione funzionante grazie ai consigli di Thierry e PierreDuc (non sono sicuro di cosa sia andato storto in primo luogo). Tuttavia ho ancora problemi con la digitazione.

Nonostante metto

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

direttamente al mio servizio, quando scrivo

import CryptoJS from 'cryptojs'; 

appena sotto quella linea, non ottengo alcuna completamento automatico e quando inizio angolare 2 app sopra da inizio NPM; Ottengo il seguente errore e l'applicazione non si avvia

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

NOTA: Se posso aggiungere cryptojs a SystemJS config (ma non a) e poi scrivere (senza alcuna importazione)

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

funziona ma preferirei risolvere i dattilografi + i problemi di importazione.

Answer 1

Si potrebbe provare questo dato che la biblioteca è CommonJS-compatibile nel file HTML principale:

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

e importarlo in questo modo:

import CryptoJS from 'cryptojs'; 

Per la parte di compilazione, è possibile seguire la Il suggerimento di Pierre

Modifica

Ho fatto alcune prove e qui è il modo per farlo.

• Installare tipizzazioni per cripto-js:

  $ typings install --ambient crypto-js 
  

• Includere le tipizzazioni corrispondenti nel file ts:

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

• configurare la libreria in SystemJS nel file HTML principale:

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

• importare la libreria nei file ts:

  import CryptoJS from 'crypto-js'; 
  

Answer 2

sono stato in grado di ottenere CryptoJS che lavorano in un progetto di Angular2 generata con angolare cli con le seguenti operazioni/configurazione:

bash

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

angolari-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'; 

questa era l'unica configurazione che avrei potuto ottenere a lavorare sia per un regolare build e una build -prod. Mi rendo conto che questa domanda non riguardava specificamente l'angular-cli, ma ho pensato di rispondere comunque nel caso in cui aiutasse qualcun altro.

Answer 3

Le risposte importano l'intera libreria crypto-js, gonfiando così l'app se ne usate solo piccoli bit.

voglio mantenere la mia app come assetto possibile, quindi questo è il mio approccio:

installare tramite 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'; 

Questo ha però un paio di inconvenienti.I metodi di scelta rapida non funzionano per me:

non funziona

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

funziona

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

Per evitare l'errore del compilatore "Could not find module x", avevo bisogno di aggiungere il seguente a custom.typings.d.ts

declare module 'crypto-js/core' 

Poi collegamento al tipizzazioni dai miei main.ts

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

Lo svantaggio principale è che le tipizzazioni menzionati nelle altre risposte non sembrano lavorare con questo approccio, perché sono per la intera libreria crypto-js. Ad esempio, CryptoJS.algo non è riconosciuto. Quindi fa davvero schifo ma non ho intellisense/autocomplete nell'IDE

Quindi perché mettere con un tale inconveniente? Mentre l'intera libreria aggiunge circa 60kb di JS minified alla mia app, importando solo ciò di cui ho bisogno aggiunge 4.5kb. E questa è una vittoria per me.

Answer 4

Quando ho provato a correre:

tipizzazioni installare --ambient cripto-js

ho ottenuto l'errore:

tipizzazioni ERR! deprecato Il flag "ambient" è deprecato. Utilizzare "global" invece

Invece, mettendo questa riga nel file typings.json, ha funzionato.

"cryptojs": "Registro di sistema: dt/cryptojs # 3.1.4 + 20.160.505,170201 millions"

Answer 5

Per installare cryptojs run pacchetto seguente comando:

npm installare cryptojs --save

Dopo aver completato l'installazione precedente se si utilizzano pacchetti Webpack o versioni angularjs aggiornate, eseguire anche il seguente comando per ottenere i file di dichiarazione.

npm installare --save @ tipi/cryptojs

In @types di file node_modules d.tS saranno aggiunti in modo da risolvere l'errore conseguente importazione per cryptojs. Questo ha funzionato per me.