कोणीय 2 में गैर-कोर एनपीएम मॉड्यूल कैसे आयात करें (एक एन्क्रिप्शन पुस्तकालय का उपयोग करने के लिए)?

Question

मेरी कोणीय 2 एप्लिकेशन में (SystemJS मॉड्यूल प्रबंधक, टाइपप्रति पटकथा भाषा के रूप में) मैं एन्क्रिप्शन को संभालने के लिए एक NPM मॉड्यूल आयात करने की आवश्यकता है (या तो क्रिप्टो-जे एस, फोर्ज-जे एस या किसी अन्य उद्देश्य की सेवा)

मामले में CryptoJS की, के माध्यम से इसे स्थापित करने के बाद NPM स्थापित * मैं जोड़कर की कोशिश की:

में

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

सूचकांक: एचटीएमएल।

मेरी सेवा में (एप्लिकेशन/सेवाओं/मेरी-service.service.ts) मैं इसे माध्यम से

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

आयात हालांकि आयात उदाहरण के लिए के रूप में सही ढंग से काम नहीं करता है

console.log(CryptoJS); 

प्रिंट अपरिभाषित।

मैं भी द्वारा

import {CryptoJS} from 'cryptoJs'; 

मेरी सेवा में

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

में मॉड्यूल पथ जोड़ने और इसे आयात करने के लिए जब मैं यकीन नहीं है की कोशिश की क्या मैं वास्तव में SystemJS config में क्या रखना चाहिए , मैंने कोशिश किए गए समाधानों में से कोई भी काम नहीं किया।

संपादित मैं भी कोशिश की ...

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

लेकिन फिर

console.log(CryptoJS.); 

कोई एईएस/जो कुछ भी विधि (अपने संपादक आमतौर पर जो तरीकों मैं स्वत: पूर्ण करने के माध्यम से इस्तेमाल कर सकते हैं सलाह) देता है

EDIT 2 अब थियरी और पियरेडुक योगदान के लिए धन्यवाद यह स्पष्ट था टी टाइपिंग और मॉड्यूल आयात अनलिंक अवधारणाएं हैं।

हालांकि उनमें से कोई भी काम नहीं कर रहा है। तब मैं typings/main.d को

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

जोड़ा

मैं CryptoJS typings file डाउनलोड किया है, typings में रख/cryptojs/cryptojs.d.ts

: यह मैं क्या किया है है।ts

तब मैं SystemJS के मानचित्र config में cryptojs कहा:

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

अंत में मैं जहाँ तक मैं वहाँ 2 मुद्दे हैं देख

import CryptoJS from 'cryptojs' 

से मेरी सेवा में cryptojs आयात करने की कोशिश की:

• टाइपिंग लोड नहीं होते हैं क्योंकि जब मैं मॉड्यूल आयात करने का प्रयास करता हूं तो कोई स्वतः पूर्ण नहीं होता है (मैं भी कोणीय 2 ऐप को पुनरारंभ करने का प्रयास किया)। शायद मुझे समझ में नहीं आया कि बाहरी टाइपिंग कैसे आयात करें?
• मॉड्यूल वैसे भी लोड नहीं है, मैं देख सकता हूँ कि console.log द्वारा (cryptojs) (कुछ भी नहीं, मुद्रित भी अपरिभाषित नहीं है, संभावना नहीं मेरे पिछले प्रयास)

संपादित 3

अंत में मुझे थियरी और पियरेडुक सलाह के लिए धन्यवाद काम करने का धन्यवाद मिला (यकीन नहीं है कि पहले स्थान पर क्या गलत हुआ)। हालांकि मुझे अभी भी टाइपिंग के साथ समस्याएं हैं।

के बावजूद मैं अपने सेवा में

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

सीधे शब्दों में कहें, जब मैं लिखने

import CryptoJS from 'cryptojs'; 

सिर्फ इतना है कि रेखा के नीचे, मुझे कोई स्वतः पूर्ण हो जाते हैं और जब मैं NPM शुरू कर आरंभ कोणीय 2 एप्लिकेशन; मैं निम्नलिखित त्रुटि मिलती है और एप्लिकेशन को शुरू नहीं करता है

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

नोट: मैं (किसी भी आयात के बिना) SystemJS config को cryptojs जोड़ते हैं (लेकिन नहीं एक) और फिर लिखने

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

यह सिर्फ काम करता है लेकिन मैं टाइपिंग + आयात मुद्दों को हल करना चाहता हूं।

Answer 1

आप इस कोशिश कर सकते के बाद से पुस्तकालय आपका मुख्य HTML फ़ाइल में CommonJS अनुरूप है:

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

और यह इस तरह से आयात:

import CryptoJS from 'cryptojs'; 

संकलन भाग के लिए, आप का अनुसरण कर सकते पियरे का सुझाव

संपादित

मैं कुछ परीक्षण किए गए और यहाँ तरीके से करना है।

• स्थापित क्रिप्टो-js के लिए typings:

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

• कॉन्फ़िगर आपका मुख्य HTML फ़ाइल में SystemJS में पुस्तकालय:

  $ typings install --ambient crypto-js 
  

• अपने ts फ़ाइल में इसी typings को शामिल करें:

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

• आयात अपने ts फ़ाइलों में पुस्तकालय:

  import CryptoJS from 'crypto-js'; 
  

Answer 2

मैं के साथ उत्पन्न एक Angular2 परियोजना में काम कर रहे CryptoJS प्राप्त करने में सक्षम था कोणीय CLI के लिए निम्न चरण/विन्यास के साथ:

बैश

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

कोणीय 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'; 

यह केवल सेटअप है कि मैं दोनों एक नियमित रूप से के लिए काम हो सकता है था निर्माण और -prod निर्माण। मुझे एहसास है कि यह सवाल विशेष रूप से कोणीय-क्ली के बारे में नहीं था, लेकिन मुझे लगता है कि अगर मैं किसी और की मदद करता हूं तो मैं इसका उत्तर दूंगा।

Answer 3

उत्तर पूरे crypto-js लाइब्रेरी आयात करते हैं, इस प्रकार यदि आप केवल छोटे बिट्स का उपयोग करते हैं तो ऐप को फूलाते हैं।

मैं संभव के रूप में ट्रिम के रूप में मेरे एप्लिकेशन रखना चाहते हैं, तो यह मेरे दृष्टिकोण है:

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'}, 
     ... 
    } 
}); 

NPM के माध्यम से स्थापित

घटक.ts

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

हालांकि इसमें कुछ कमीएं हैं।शॉर्टकट विधियों का मेरे लिए काम नहीं है:

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

काम करता है

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

संकलक त्रुटि "Could not find module x" से बचने के लिए काम नहीं करता, मैं निम्नलिखित जोड़ने की जरूरत custom.typings.d.ts

declare module 'crypto-js/core' 

तब मेरे main.ts से typings से लिंक

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

मुख्य दोष यह है कि typings अन्य उत्तर में वर्णित इस दृष्टिकोण के साथ काम करने के लिए है क्योंकि वे के लिए कर रहे हैं नहीं है पूरे crypto-js पुस्तकालय। उदाहरण के लिए, CryptoJS.algo पहचाना नहीं गया है। तो यह वास्तव में बेकार है लेकिन मेरे पास IDE

में इंटेलिजेंस/स्वतः पूर्ण नहीं है तो इस तरह की कमी क्यों डालें? जबकि पूरी लाइब्रेरी मेरे ऐप में लगभग 60 किलो खनिज जेएस जोड़ती है, जो मुझे चाहिए उसे आयात करना 4.5 किलोबाइट जोड़ता है। और यह मेरे लिए एक जीत है।

Answer 4

जब मैं भागने की कोशिश की:

typings स्थापित --ambient क्रिप्टो-js

मैं त्रुटि मिली:

typings ERR! बहिष्कृत "परिवेश" ध्वज को हटा दिया गया है। कृपया

इसके बजाय "वैश्विक" का उपयोग करें, इसके बजाय, इस लाइन को typings.json फ़ाइल में डालें, यह काम करता है।

"cryptojs": "रजिस्ट्री: डीटी/cryptojs # 3.1.4 + 20160505170201"

Answer 5

cryptojs पैकेज रन आदेश के बाद स्थापित करने के लिए:

NPM cryptojs --save

स्थापित

उपरोक्त स्थापना को पूरा करने के बाद यदि आप वेबपैक/बंडल या अद्यतन कोणीय संस्करणों का उपयोग कर रहे हैं तो घोषणा आदेश फ़ाइलों को प्राप्त करने के लिए निम्न आदेश चलाएं। इतनी के रूप में cryptojs के लिए आयात संबंधी त्रुटि को हल करने

NPM स्थापित --save @ प्रकार/

cryptojs node_modules d.ts फ़ाइलों के @types में जोड़ दिया जाएगा। यह मेरे लिए काम किया।