कोणीय क्ली 1.0.0-आरसी.0 में jQuery को सही तरीके से कैसे शामिल करें?

Question

मैं अपने AngularJS प्रोजेक्ट में jQuery- आधारित 2 घटक का उपयोग करता हूं। मेरे यहां लोगों के समान समस्या थी: https://github.com/fronteed/icheck/issues/322, और वहां से सलाह का उपयोग करके हल किया। सटीक होने के लिए, मुझे उस सलाह का उपयोग न करने पर त्रुटि TypeError: $(...).select2 is not a function मिली।

यानी मैंने @angular/cli/models/webpack-configs/common.js में वेबपैक की कॉन्फ़िगरेशन के लिए अगली पंक्तियां जोड़ दीं।

plugins: [ 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }) 
] 

क्या यह कोणीय/क्ली में jQuery को सक्षम करने का सबसे अच्छा तरीका है?

मुझे नहीं लगता कि https://github.com/angular/angular-cli/wiki/stories-global-lib में के रूप में ही कर रही है, सही तरीका है क्योंकि

क) webpack जब आप शामिल लिपियों

ख में यह निर्दिष्ट करने के लिए) यह अभी भी फेंकता है TypeError: $(...).select2 is not a function त्रुटि की आवश्यकता के बिना jQuery बंडल जैसा कि कहानी में वर्णित है।

Answer 1

मैं वेबपैक को उजागर करके जो कुछ चाहता था उसे हासिल करने में सक्षम था। ng eject कमांड का प्रयोग करें।

सबसे पहले, npm install -S jquery का उपयोग करके jQuery स्थापित करें (और मैंने npm install -S select2 भी स्थापित किया है, क्योंकि मुझे इसकी भी आवश्यकता है)।

फिर, सुनिश्चित करें कि आपने अपने पैकेज.जेसन फ़ाइल का बैकअप बनाया है, क्योंकि ng eject के दौरान कोणीय सीएलआई आपके पैकेज.जेसन के अंदर अपनी वेबपैक निर्भरताओं को जोड़ने का प्रयास करेगा।

ng eject के बाद काम खत्म, webpack.config.js अंदर मैं

// ... Inside require/imports part 
const ProvidePlugin = require('webpack/lib/ProvidePlugin'); 

// ... Inside `plugins` section of Webpack configuration 
new ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }) 

जोड़ा और अब Select2 ठीक से वैश्विक jQuery वस्तु को $(...).select2 समारोह कहते हैं!

Select2 साथ jQuery का उपयोग करने के अंदर अपने .ts फ़ाइल, तो आप उस फ़ाइल की शुरुआत में अगली पंक्तियों में जोड़ सकते हैं:

import "select2"; 
import "jquery"; 
declare var $: any; 

// Somewhere deep within component 
// ... 

$(this.input.nativeElement) 
    .select2(config) 
    .on("change select2:select select2:unselect", (e: any) => this.onSelect2ElementChange(e)); 

// ... 

Answer 2

इसे उसी तरह जोड़ना जैसे आपके द्वारा प्रदान किए गए लिंक से यह लोड हो जाएगा। अन्यथा अपने घटक में नीचे आज़माएं।

npm install jquery 

फिर अपने घटक

declare var $:any; 
var $ = require('jquery'); 

Answer 3

मैं अपने प्रोजेक्ट में jQuery का उपयोग इस प्रकार में उपयोग करें।

1. स्थापित jQuery

   npm install --save jquery 
   

2. प्रकार की जाँच के लिए jQuery प्रकार defination स्थापित करें।

   npm install --save-dev @types/jquery 
   

3. कोणीय cli.json फाइल के अंदर "लिपियों" सरणी में jQuery फ़ाइल के refenece जोड़ें।

   "scripts": [ 
       "../node_modules/jquery/dist/jquery.min.js" 
   ] 
   

4. किसी भी घटक में आयात jquery जिसे आप उपयोग करना चाहते हैं।

   import * as jQuery from 'jquery'; 
   

यह है कि। उसी तरह आप moment.js, d3.js इत्यादि जैसे अन्य पुस्तकालयों का भी उपयोग कर सकते हैं

Answer 4

तुम भी expose-loader इस्तेमाल कर सकते हैं। नीचे दिया गया उदाहरण वेबपैक 2,

{ test: /[\/]jquery\.js$/, 
    use: [ 
     { loader: 'expose-loader', query: 'jQuery' }, 
     { loader: 'expose-loader', query: '$' } 
    ] 
    },