एंगुलर 2, 4, 5, 6 में एक प्लगइन आर्किटेक्चर / प्लगइन सिस्टम / प्लगेबल फ्रेमवर्क को लागू करना

133

अद्यतन 5/24/2018: अब मैं अपने मूल पोस्ट से कोणीय के +3 संस्करण हैं और अभी भी अंतिम व्यावहारिक समाधान नहीं है। लार्स मीजडैम (@LarsMeijdam) एक दिलचस्प दृष्टिकोण के साथ आया है जो निश्चित रूप से देखने लायक है। (मालिकाना मुद्दों के कारण, उन्हें अस्थायी रूप से गिटहब रिपॉजिटरी को हटाना पड़ा जहां उन्होंने मूल रूप से अपना नमूना पोस्ट किया था। हालांकि, अगर आप एक प्रति चाहते हैं तो आप उन्हें सीधे संदेश दे सकते हैं। कृपया अधिक जानकारी के लिए नीचे टिप्पणी देखें।)

एंगुलर 6 में हालिया वास्तु परिवर्तन हमें एक समाधान के करीब लाते हैं। इसके अतिरिक्त, कोणीय तत्व ( https://angular.io/guide/elements ) कुछ घटक कार्यक्षमता प्रदान करता है - हालांकि काफी नहीं है जो मैंने मूल रूप से इस पोस्ट में वर्णित किया है।

यदि अद्भुत कोणीय टीम में से कोई भी इस पार आता है, तो कृपया ध्यान दें कि कई अन्य लोग हैं जो इस कार्यक्षमता में भी बहुत रुचि रखते हैं। यह बैकलॉग के लिए अच्छी तरह से विचार करने लायक हो सकता है।

मैं एक प्लगेबल (प्लग में) एक में ढांचे को लागू करना चाहते हैं Angular 2, Angular 4, Angular 5, या Angular 6आवेदन।

(इस प्लग करने योग्य ढांचे को विकसित करने के लिए मेरा विशिष्ट उपयोग मामला यह है कि मुझे एक लघु सामग्री प्रबंधन प्रणाली विकसित करने की आवश्यकता है। कई कारणों से जो यहां विस्तृत रूप से वर्णित नहीं Angular 2/4/5/6हैं, उस प्रणाली की अधिकांश आवश्यकताओं के लिए एक सही फिट है।)

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

( अनुप्रयोग के स्रोत कोड या आंतरिक कामकाज के प्रत्यक्ष उपयोग या ज्ञान के बिना "के बारे में " यह एक मुख्य उद्देश्य है।

प्लगेबल फ्रेमवर्क के उदाहरणों में कॉमन कंटेंट मैनेजमेंट सिस्टम जैसे WordPressया Drupal।

आदर्श स्थिति (जैसा कि ड्रुपल के साथ) सरल होगा, इन प्लग करने योग्य घटकों (या प्लग-इन) को एक फ़ोल्डर में रखने में सक्षम होगा, एप्लिकेशन ऑटो-डिटेक्ट करें या उन्हें खोजें, और उन्हें बस जादुई रूप से "काम" करें। यह कुछ प्रकार के गर्म-प्लग-योग्य तरीके से होता है, जिसका अर्थ है कि ऐप चल रहा था, इष्टतम होगा।

मैं वर्तमान में निम्नलिखित पांच प्रश्नों के उत्तर ( आपकी मदद से ) निर्धारित करने का प्रयास कर रहा हूं ।

व्यावहारिकता: एक Angular 2/4/5/6आवेदन के लिए एक प्लगइन फ्रेमवर्क भी व्यावहारिक है? (अब तक, मुझे वास्तव में प्लग करने योग्य रूपरेखा बनाने का कोई व्यावहारिक तरीका नहीं मिला है Angular2/4/5/6।)
अपेक्षित चुनौतियां: एक Angular 2/4/5/6आवेदन के लिए एक प्लगइन ढांचे को लागू करने में क्या चुनौतियां आ सकती हैं ?
कार्यान्वयन रणनीतियाँ: किसी Angular 2/4/5/6एप्लिकेशन के लिए एक प्लगइन फ्रेमवर्क को लागू करने के लिए कौन सी विशिष्ट तकनीकों या रणनीतियों को नियोजित किया जा सकता है ?
सर्वोत्तम प्रथाएँ: एक Angular 2/4/5/6आवेदन के लिए एक प्लगइन प्रणाली को लागू करने के लिए सबसे अच्छे अभ्यास क्या हैं ?
वैकल्पिक प्रौद्योगिकियां: यदि किसी एप्लिकेशन में एक प्लगइन फ्रेमवर्क व्यावहारिक नहीं हैAngular 2/4/5/6 , तो आधुनिक उच्च प्रतिक्रियाशील वेब एप्लिकेशन के लिए कौन सी अपेक्षाकृत समकक्ष प्रौद्योगिकियां (जैसे React) उपयुक्त हो सकती हैं ?

सामान्य तौर पर, का उपयोग Angular 2/4/5/6बहुत ही वांछनीय है क्योंकि:

यह स्वाभाविक रूप से बहुत तेज है - धधकते हुए।
यह बहुत कम बैंडविड्थ (प्रारंभिक भार के बाद) का उपभोग करता है
यह एक अपेक्षाकृत छोटे पदचिह्न (के बाद है AOTऔर tree shaking) - और कि पदचिह्न हटना करने के लिए जारी
यह अत्यधिक कार्यात्मक है, और कोणीय टीम और समुदाय अपने पारिस्थितिकी तंत्र का तेजी से विकास कर रहे हैं
यह कई बेहतरीन और नवीनतम वेब तकनीकों जैसे कि TypeScriptऔर के साथ अच्छा खेलता हैObservables
कोणीय 5 अब सेवा कार्यकर्ताओं ( https://medium.com/@webmaxru/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-1-theory-37d7d7647cc7 ) का समर्थन करता है
द्वारा समर्थित होने के कारण Google, इसे भविष्य में अच्छी तरह से समर्थित और बढ़ाया जाने की संभावना है

मैं Angular 2/4/5/6अपने वर्तमान प्रोजेक्ट के लिए बहुत उपयोग करना चाहूंगा । अगर मैं उपयोग करने में सक्षम Angular 2/4/5/6हूं, तो मैं भी उपयोग करूंगा Angular-CLIऔर शायद Angular Universal(सर्वर-साइड रेंडरिंग के लिए)।

यहाँ मेरे विचार हैं, अब तक, उपरोक्त प्रश्नों के बारे में। कृपया समीक्षा करें और अपनी प्रतिक्रिया और ज्ञान प्रदान करें।

Angular 2/4/5/6एप्लिकेशन पैकेजों का उपभोग करते हैं - लेकिन यह जरूरी नहीं है कि किसी एप्लिकेशन के भीतर प्लगइन्स की अनुमति हो। अन्य प्रणालियों (जैसे Drupal) में एक प्लगइन अनिवार्य रूप से प्लगइन फ़ोल्डर को एक सामान्य मॉड्यूल निर्देशिका में ड्रॉप करके जोड़ा जा सकता है जहां यह सिस्टम द्वारा स्वचालित रूप से "उठाया" जाता है। में Angular 2/4/5/6, एक पैकेज (एक प्लगइन के रूप में हो सकता है) आमतौर पर के माध्यम से स्थापित किया जाता है npm, में जोड़ा जाता है package.json, और फिर मैन्युअल रूप से ऐप में आयात किया जाता है - जैसे कि app.module। यह Drupalएक फ़ोल्डर को छोड़ने और सिस्टम को स्वचालित रूप से पैकेज का पता लगाने की विधि की तुलना में बहुत अधिक जटिल है । एक प्लगइन स्थापित करने के लिए जितना अधिक जटिल है, उतना ही कम लोगों को उनका उपयोग करने की संभावना होगी। इसके लिए रास्ता होता तो ज्यादा बेहतर होताAngular 2/4/5/6स्वचालित रूप से प्लगइन्स का पता लगाने और स्थापित करने के लिए। मुझे एक ऐसी विधि खोजने में बहुत दिलचस्पी है जो गैर-डेवलपर्स को Angular 2/4/5/6एप्लिकेशन को स्थापित करने और किसी भी चुने हुए प्लगइन्स को स्थापित करने की अनुमति देता है , ताकि एप्लिकेशन के सभी आर्किटेक्चर को समझे बिना।
आमतौर पर, एक प्लगेबल आर्किटेक्चर प्रदान करने के लाभों में से एक यह है कि सिस्टम की कार्यक्षमता का विस्तार करने के लिए 3 पार्टी डेवलपर्स के लिए यह बहुत आसान है। जाहिर है, ये डेवलपर्स उस एप्लिकेशन के सभी कोड से परिचित नहीं होंगे जिसके लिए वे प्लग इन कर रहे हैं। एक बार प्लगइन्स विकसित होने के बाद, अन्य कम तकनीकी उपयोगकर्ता भी केवल एप्लिकेशन और किसी भी चयनित प्लगइन्स को स्थापित कर सकते हैं। हालांकि, Angular 2/4/5/6अपेक्षाकृत जटिल है और इसमें बहुत लंबा सीखने की अवस्था है। आगे जटिल बातें करने के लिए, सबसे उत्पादन Angular 2/4/5/6आवेदन भी उपयोग Angular-CLI, Angular Universalऔर WebPack। एक प्लगइन को लागू करने वाले किसी व्यक्ति के पास कम से कम कुछ बुनियादी ज्ञान होना चाहिए कि ये सभी एक साथ कैसे फिट होते हैं - एक मजबूत काम ज्ञान के साथTypeScriptऔर एक उचित परिचित के साथ NodeJS। क्या ज्ञान की आवश्यकताएं इतनी चरम हैं कि कोई तीसरा पक्ष कभी भी प्लगइन विकसित नहीं करना चाहेगा?
अधिकांश प्लगइन्स की संभावना कुछ सर्वर साइड घटक (जैसे प्लगइन संबंधित डेटा को संग्रहीत / पुनर्प्राप्त करने के लिए) के साथ-साथ कुछ क्लाइंट-साइड आउटपुट में होगी। Angular 2/4/5विशेष रूप से (और दृढ़ता से) डेवलपर्स को अपने स्वयं के टेम्प्लेट को रनटाइम पर इंजेक्ट करने से हतोत्साहित करता है - क्योंकि यह एक गंभीर सुरक्षा जोखिम पैदा करता है। कई प्रकार के आउटपुट को संभालने के लिए, जो एक प्लगइन को समायोजित कर सकता है (उदाहरण के लिए एक ग्राफ का प्रदर्शन), ऐसा प्रतीत होता है कि उपयोगकर्ताओं को ऐसी सामग्री बनाने की अनुमति मिलती है, जो प्रतिक्रिया स्ट्रीम में इंजेक्ट की जाती है, एक रूप में दूसरे में, संभवतः आवश्यक है। मुझे आश्चर्य है कि कैसे इस आवश्यकता को समायोजित करने के लिए संभव हो सकता है बिना लाक्षणिक Angular 2/4/5/6सुरक्षा तंत्र की कतरन ।
अधिकांश उत्पादन Angular 2/4/5/6अनुप्रयोग संकलन Ahead of Time( AOT) संकलन का उपयोग करके पूर्व-संकलित किए जाते हैं । (संभवतः सभी को होना चाहिए।) मैं अनिश्चित हूं कि प्लगइन्स को पूर्व-संकलित अनुप्रयोगों में कैसे जोड़ा जा सकता है (या साथ एकीकृत)। सबसे अच्छा परिदृश्य मुख्य अनुप्रयोग से अलग से प्लगइन्स संकलित करना शामिल होगा। हालांकि, मैं अनिश्चित हूं कि यह काम कैसे किया जाए। फ़ॉलबैक किसी भी शामिल प्लगइन्स के साथ पूरे एप्लिकेशन को फिर से संकलित करने के लिए हो सकता है, लेकिन यह एक प्रशासनिक उपयोगकर्ता के लिए चीजों को थोड़ा जटिल करता है जो किसी भी चयनित प्लगइन्स के साथ ही एप्लिकेशन (अपने सर्वर पर) को इंस्टॉल करना चाहता है।
एक Angular 2/4/5/6आवेदन में, विशेष रूप से पूर्व-संकलित, गलत या परस्पर विरोधी कोड का एक भी टुकड़ा पूरे आवेदन को तोड़ सकता है। Angular 2/4/5/6अनुप्रयोग हमेशा डिबग करने के लिए सबसे आसान नहीं होते हैं। गैर-व्यवहार वाले प्लगइन्स के अनुप्रयोग के परिणामस्वरूप बहुत अप्रिय अनुभव हो सकते हैं। मैं इस समय अनजान व्यवहार करने वाले प्लगइन्स को सावधानीपूर्वक संभालने के लिए एक तंत्र से अनजान हूं।

— एंथोनी गैटलिन
स्रोत

1

मेरे उत्पीड़न में, एक कोणीय 2 मॉड्यूल एक प्लगइन है। @ कोणीय / राउटर, @ कोणीय / रूप, @ कोणीय / http, @ कोणीय / सामग्री, ये कोणीय से 'प्लगइन्स' हैं, हम जांच सकते हैं कि वे 'प्लग इन' कैसे बनाते हैं।

— तीमुथियॉन

8

@ तैमथॉन, दुर्भाग्य से, वे समान नहीं हैं। प्लगिन सिस्टम एक एप्लिकेशन को मुख्य एप्लिकेशन कोड के संशोधन के बिना विस्तारित करने की अनुमति देता है। @ कोणीय / राउटर, @ कोणीय / रूपों आदि के उपयोग के लिए उपयोगकर्ता को आवेदन को संशोधित करने की आवश्यकता होती है। प्लगइन्स के विपरीत वे वास्तव में पुस्तकालय हैं। मुझे गैर-डेवलपर प्रशासनिक उपयोगकर्ताओं को उन प्लगइन्स का चयन करने और उपयोग करने की अनुमति देने में वास्तव में अधिक दिलचस्पी है जो एप्लिकेशन के आंतरिक विवरण के बारे में पता किए बिना सबसे दिलचस्प हैं।

— एंथनी गैटलिन

1

क्या आप इसके साथ कहीं गए थे? मुझे कुछ इसी तरह की कोशिश करने में दिलचस्पी है। जिस तरह से Angular 2 का निर्माण होता है (मॉड्यूल के आसपास) मुझे लगा कि एक प्लगइन टाइप आर्किटेक्चर वास्तव में अच्छी तरह से फिट होगा, लेकिन यह किसी भी उदाहरण आदि के लिए प्रतीत नहीं होता है

— जो

2

@ हाँ, मैं अभी भी इस समस्या के लिए एक अच्छा समाधान नहीं है। मैंने भी आपके जैसा ही सोचा।

— एंथनी गैटलिन

2

मैंने एक समाधान के साथ जीथब पर एक भंडार बनाया, जो मदद कर सकता है। यह Angular 6 पुस्तकालयों और 1 आधार अनुप्रयोगों का उपयोग करता है जो UMD बंडल किए गए पुस्तकालयों को आलसी रूप से लोड करते हैं; github.com/lmeijdam/angular-umd-dynamic-example यदि आपके कोई सुझाव हैं, तो कृपया जोड़ने के लिए स्वतंत्र महसूस करें!

— लार्स मीजडैम

17

मैंने एक समाधान के साथ जीथब पर एक भंडार बनाया, जो मदद कर सकता है। यह Angular 6 पुस्तकालयों और 1 आधार अनुप्रयोगों का उपयोग करता है जो UMD बंडल किए गए पुस्तकालयों को आलसी रूप से लोड करते हैं; https://github.com/lmeijdam/angular-umd-dynamic-example

यदि आपके पास कोई सुझाव है, तो कृपया जोड़ने के लिए स्वतंत्र महसूस करें!

— लार्स मीजडैम
स्रोत

2

जैसा कि एक अन्य टिप्पणी में उल्लेख किया गया है, मुझे कंपनी की नीति के कारण रिपॉजिटरी को निजी बनाना था .. मैं इसे बाद में ऑनलाइन वापस

— रखूंगा

कृपया अपना समाधान देखना पसंद करेंगे।

— सुभान अहमद

@ शुभान, मैं वर्तमान में फिर से जीएच पर वापस रखने से पहले भंडार को फिर से लिखने में व्यस्त हूं। मुझे थोड़ा और समय दो। अन्यथा आप मुझसे सीधे संपर्क भी कर सकते हैं! : D

— लार्स मीजदाम

@ लार्स-मीजडैम: हम अभी भी बहुत इंतजार करेंगे: डी ... मुझे बहुत दिलचस्पी है। अग्रिम धन्यवाद

— aguetat

17

। Github डेमो कोणीय-प्लगइन-आर्किटेक्चर

हो सकता है कि आइवी कुछ बदल सकता है, लेकिन समय के लिए मैं एंगुलर सीएलआई कस्टम बिल्डर का उपयोग करने वाले समाधान का उपयोग करता हूं और निम्नलिखित आवश्यकताओं को पूरा करता हूं:

AOT
डुप्लिकेट कोड से बचें (@ कोणीय / कोर {सामान्य, फ़ॉर्म, रूटर}, rxjs, tslib जैसे पैकेज)
सभी प्लग इन में साझा पुस्तकालय का उपयोग करें, लेकिन प्रत्येक प्लगइन में उस साझा पुस्तकालय से कारखानों को उत्पन्न न करें, बल्कि पुस्तकालय कोड और कारखानों का पुन: उपयोग करें
अनुकूलन का वही स्तर जो हमें कोणीय सीएलआई देता है
बाहरी मॉड्यूल को आयात करने के लिए हमें केवल एक चीज जानने की जरूरत है: उनका बंडल फ़ाइल पथ
हमारे कोड को मॉड्यूल को पहचानना चाहिए और पेज में प्लगइन को जगह देनी चाहिए
समर्थन सर्वर-साइड प्रतिपादन
लोड मॉड्यूल केवल जब जरूरत

उपयोग सरल है:

ng build --project plugins --prod --modulePath=./plugin1/plugin1.module#Plugin1Module 
         --pluginName=plugin1 --sharedLibs=shared --outputPath=./src/assets/plugins

मेरे लेख में इस पर अधिक:

कोणीय के साथ एक्स्टेंसिबल डायनेमिक प्लगेबल एंटरप्राइज एप्लीकेशन का निर्माण

— yurzui
स्रोत

महान उदाहरण! एक सवाल। मैं OAuthTokenअपने मुख्य ऐप से लाइब्रेरी सेवा के लिए रनटाइम पर कैसे पास कर सकता हूं ?

— योजन दारजी

@yurzui क्या हम एक ही दृष्टिकोण का उपयोग कर सकते हैं यदि हमारे पास कई कोणीय अनुप्रयोग हैं और हम उनके पूर्ण वितरण का उपयोग करते हैं जैसे कि आपने प्लगइन 1 और प्लगइन 2 किया था?

— मोमिन शहजाद

क्या आप इस उदाहरण को फिर से देख पाएंगे और निकट भविष्य में इसे आइवी को संगत बना पाएंगे? यदि आप चाहते हैं, तो कृपया एक साझा सेवा का एक उदाहरण जोड़ें और साझा करें InjectionTokenजो कि AppModule में प्रदान किया जाएगा और अन्य प्लगइन्स में इंजेक्ट किया जाएगा। धन्यवाद!

— जिरका

11

मैंने अभी अपनी पुस्तक " एंग्लिंग विद एंगुलर " के लिए एक नया अध्याय प्रकाशित किया है, जो एंगुलर 2+ में प्लगइन्स के विषय को संबोधित करता है और इसे उन लोगों के लिए बहुत रुचि होना चाहिए जो बाहरी प्लगइन्स बनाने की कोशिश कर रहे हैं।

प्रमुख बिंदु:

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

पुस्तक प्राप्त करने के लिए स्वतंत्र है, और "भुगतान करें जो आप चाहते हैं" मॉडल है। एक कॉपी और आशा है कि मदद करता है हड़पने के लिए स्वतंत्र महसूस करें।

— डेयका वुइका
स्रोत

पुस्तक में चित्रित आपके प्लगइन वास्तुकला द्वारा मैं एक उप-घटक को कैसे बदल सकता हूं? मैं टेम्पलेट को बदल दूंगा या शायद मैं एक इनपुट प्रॉपर्टी ecc जोड़ दूंगा ... उसी समय मुझे यह जानना होगा कि क्या किसी सेवा को ओवरराइड / विस्तारित करने का कोई तरीका मौजूद है।

— मत्तो कैलो

1

@ डेनिस वुका, यह पुस्तक बहुत अच्छी लग रही है, लेकिन इसमें एओटी संकलन का महत्वपूर्ण हिस्सा - समर्थन का अभाव है।

— सर्गेई सोकोलोव

7

एक काम कर प्लगइन प्रणाली के साथ उदाहरण आवेदन (GitHub रेपो स्थापना के लिए गिज्स करने के लिए धन्यवाद!) Https://github.com/PacktPublishing/Mastering-Angular-2-Components/tree/master/angular-2-components-chapter-10 आधारित eBook Mastering Angular 2 Components पर

मुख्य एप्लिकेशन घटकों का विस्तार करने के लिए प्लगइन वास्तुकला
फ़ाइल प्लगइन सिस्टम (किसी भी कोर कॉन्फिग फाइल को एडिट किए बिना या केवल अपने एप्लिकेशन को फिर से जोड़ने के लिए प्लगइन निर्देशिका / फ़ाइलों को जोड़ने के लिए!)
लोड और गतिशील रूप से प्लगइन्स का उपयोग करें
एक प्लग-इन को सक्रिय / निष्क्रिय करने के लिए अल्पविकसित प्लगइन प्रबंधक का निर्माण

चीयर्स, निकल्स

— निकलैस टेइच
स्रोत

2

उस लिंक से उदाहरण कोड नहीं देख सकते, क्या आप एक कोड पेन या JSFiddle पोस्ट कर सकते हैं?

— सीन चेस

github.com/PacktPublishing/Mastering-Angular-2-Compords/tree/…

— Gijs

4

मैं किताब पढ़ता हूं, लेकिन प्लगइन हिस्सा पुराना है। यह प्लेन JS और SystemJS का उपयोग करता है, जबकि Angular टाइपस्क्रिप्ट और वेबपैक की ओर लक्षित है। वेबपैक और टाइपस्क्रिप्ट का उपयोग करना संभव नहीं लगता है, मैंने आपके द्वारा कोई समाधान पाए जाने पर प्रश्न पोस्ट किया है। यहाँ है लिंक है

— लुइगी डलावले

यह मदद करनी चाहिए: github.com/mgechev/angular-seed/issues/…

— Guillaume

क्या कोई पुष्टि कर सकता है कि ऊपर काम करता है? क्या होगा अगर हम systemjs

— django

5

जो आप खोज रहे हैं वह आलसी मॉड्यूल लोडिंग है। इसका एक उदाहरण यहां दिया गया है: http://plnkr.co/edit/FDaiDvklexT68BTaNqvE?p=preview

import {Component} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'my-app',
  template: `
    <a [routerLink]="['/']">Home</a> | 
    <a [routerLink]="['/app/home']">App Home</a> |
    <a [routerLink]="['/app/lazy']">App Lazy</a>

    <hr>
    <button (click)="addRoutes()">Add Routes</button>

    <hr>
    <router-outlet></router-outlet>
  `
})
export class App {
  loaded: boolean = false;
  constructor(private router: Router) {}

  addRoutes() {
    let routerConfig = this.router.config;

    if (!this.loaded) {
      routerConfig[1].children.push({
        path: `lazy`,
        loadChildren: 'app/lazy.module#LazyModule'
      });

      this.router.resetConfig(routerConfig);
      this.loaded = true;
    }
  }
}

बेस्ट ... टॉम

— टॉम मैं
स्रोत

17

मेरे प्रश्न का उत्तर देने के लिए समय निकालने के लिए धन्यवाद। मैं आलसी लोड किए गए मॉड्यूल से परिचित हूं, लेकिन ये वे नहीं हैं जो मैं देख रहा हूं। आलसी लोड मॉड्यूल को अभी भी डिजाइन के समय पर जाना चाहिए। मैं वास्तविक मॉड्यूल और कार्यक्षमता को जोड़ने में सक्षम होना चाहता हूं जो कि मूल ऐप के निर्माण के बारे में ज्ञात या कल्पना नहीं की गई थी। (मैं जो देख रहा हूं वह कुछ अधिक गतिशील है।) निश्चित रूप से वे घटक (कुछ रूप) आलसी लोडिंग का उपयोग करेंगे लेकिन यह पहेली का केवल एक छोटा सा टुकड़ा है। इस उत्तर को साझा करने के लिए फिर से धन्यवाद।

— एंथनी गैटलिन

1

मैं मानता हूँ कि इस सवाल का जवाब नहीं है। आलसी लोडिंग प्लगइन आर्किटेक्चर के साथ मदद नहीं करता है क्योंकि उन्हें डिजाइन के समय की आवश्यकता होती है। यह केवल आवश्यक होने तक ग्राहक को डेटा डाउनलोड / ट्रांसफर नहीं करता है।

— जो

क्या होगा यदि आपके ऐप को संकलन समय पर सभी उपलब्ध प्लग-इन-मॉड्यूल के बारे में पता चल जाएगा। फिलहाल आप प्लेटफ़ॉर्म में एक नया मॉड्यूल जोड़ते हैं जिसे इस मॉड्यूल के साथ पुन: कनेक्ट किया जाना चाहिए। बस एक विचार ... मुझे यकीन नहीं है कि यह जेएस फाइलों के आकार में काफी वृद्धि करेगा, निश्चित नहीं है कि यदि आलसी-लोडिंग सुविधा इस तरह के मॉड्यूल को एक अलग फ़ाइल में डाल देगी और फिर इसे आलसी लोड करेगी, तो मैं सिर्फ अपना विचार साझा कर रहा हूं ...

— व्लादिमीर प्रुडनिकोव

@VladimirPrudnikov, यदि कोई एप्लिकेशन संकलन समय पर सभी प्लगइन्स के बारे में जान सकता है, तो यह शानदार होगा। हालाँकि, यह विचार है कि एप्लिकेशन संकलित होने के बाद संभवतः प्लगइन्स को जोड़ने में सक्षम हो। यह वास्तव में मॉड्यूल की गतिशील प्लगिंग के लिए अनुमति देगा। हालाँकि, इसके लिए मॉड्यूल की आवश्यकता होगी कि वे जिस समय पर तैनात हों, उस समय से पहले संकलित किया जाए - और मुझे यकीन नहीं है कि यह कैसे काम करेगा। मुझे यह भी पता नहीं है कि प्लगइन मॉड्यूल संस्करण को कोणीय के साथ संगत कैसे रखा जाए।

— एंथनी गैटलिन

2

मैंने बूटस्ट्रैप समय में अन्य मॉड्यूल को लोड करने और संकलित करने के लिए एक हैक बनाया, लेकिन मैंने चक्रीय निर्भरता की समस्या को हल नहीं किया है

 const moduleFile: any = require(`./${app}/${app}.module`),
                    module = moduleFile[Object.keys(moduleFile)[0]];

 route.children.push({
     path: app,
     loadChildren: (): Promise<any> => module
 });
 promises.push(this.compiler.compileModuleAndAllComponentsAsync(module));

फिर AppModule में इसे जोड़ें:

{
        provide: APP_INITIALIZER,
        useFactory: AppsLoaderFactory,
        deps: [AppsLoader],
        multi: true
},

— जोस लुइस बेरोकल
स्रोत

2

मैं कोणीय 2/4 में एक प्लगइन सिस्टम की तलाश कर रहा था, जो काम पर एक एंटरप्राइज़ एप्लिकेशन के लिए RAD परिवेश विकसित करने के लिए भी है। कुछ शोध के बाद, मैंने डेटाबेस-संग्रह (लेकिन फाइलसिस्टम में हो सकता है) छद्म-कोणीय घटकों के संग्रह को लागू करने का निर्णय लिया।

डेटाबेस डेटाबेस में संग्रहीत घटक एनजी-डायनेमिक पर आधारित होते हैं और मुख्य घटक कार्यान्वयन इसके समान होता है:

declare var ctx: any;

@Component({
    selector: 'my-template',
    template: `
<div>
    <div *dynamicComponent="template; context: { ctx: ctx };"></div>
</div>
  `,
    providers: [EmitterService],

})

export class MyTemplateComponent implements OnMount, AfterViewInit, OnChanges {


    // name
    private _name: string;
    get name(): string {
        return this._name;
    }
    @Input()
    set name(name: string) {
        this._name = name;        
        this.initTemplate();
    }

    template: string;
    ctx: any = null;

    private initTemplate() {

        this.templateSvc.getTemplate(this.name).subscribe(res => {
            // Load external JS with ctx implementation
            let promise1 = injectScript(res.pathJs);
            // Load external CCS
            let promise2 = injectScript(res.pathCss);

            Promise.all([promise1, promise2]).then(() => {

                // assign external component code
                this.ctx = ctx; //

                // sets the template
                this.template = res.template;

                this.injectServices();

                if (this.ctx && this.ctx.onInit) {
                    this.ctx.onInit();
                }

            });

        });

    }

बाह्य जावास्क्रिप्ट कोड कोणीय घटकों के समान है:

var ctx = {

// injected    
_httpService: {},
_emitterService: null,

// properies
model: {
    "title": "hello world!",
},


// events
onInit() {
    console.log('onInit');
},

onDestroy() {
    console.log('onDestroy');
},

onChanges(changes) {
    console.log('changes', changes);
},

customFunction1() {
    console.log('customFunction1');
},

childTemplateName: string = 'other-component'; 

};

और घटकों के टेम्पलेट कोणीय टेम्पलेट्स की तरह हैं:

<a (click)="customFunction1()">{{ ctx.model.title }}</a>
<input [(ngModel)]="ctx.model.title" type="text" />

और नेस्टेड भी हो सकता है:

<a (click)="customFunction1()">{{ ctx.model.title }}</a>
<my-template [name]="childTemplateName"></my-template>

यद्यपि यह सही नहीं है, कस्टम घटकों के डेवलपर्स में कोणीय 2/4 की तुलना में समान रूपरेखा है।

— zarpilla
स्रोत

2

यह किया जा सकता है, "मैन्युअल रूप से"। चूंकि वेबपैक बाहरी (प्लग-इन) मॉड्यूल के बारे में कुछ भी नहीं जानता है, वह उन्हें बंडल (एस) में शामिल नहीं कर सकता है। इसलिए मैंने जो किया, वह वेबपैक द्वारा उत्पन्न कोड को देखने के लिए है और मुझे कोड के इस पृष्ठ को main.bundle.js में मिला है:

var map = {
"./dashboard/dashboard.module": ["../../../../../src/app/dashboard/dashboard.module.ts","dashboard.module"]};

आइए देखें कि उस सरणी में क्या है:

"./dashboard/dashboard.module" - यह मॉड्यूल चुड़ैल का राउटिंग URL है जिसे हम उदाहरण के लिए आलसी लोड करना चाहते हैं: {path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule'}}।
"../../../../../Src/app/dashboard/dashboard.module.ts" - यह एंट्री पॉइंट (कॉन्ट्रैक्टर) से लेता है
"डैशबोर्ड. module " - chunk.js के बिना वास्तविक फ़ाइल नाम (उदाहरण के लिए: डैशबोर्ड. module.chunk.js )

इसलिए सिद्धांत रूप में, यदि आप मानचित्र में प्रवेश को जोड़ते हैं, तो संपत्ति आपकी रूटिंग को कॉन्फ़िगर करती है और पैटर्न का पालन करती है, तो आपके पास प्लग-इन सिस्टम हो सकता है। अब चुनौती यह है कि उस मैप प्रॉपर्टी से प्रविष्टियाँ कैसे जोड़ें या निकालें। जाहिर है कि यह कोणीय कोड से नहीं किया जा सकता है, इसे बाहरी उपकरण के लिए किया जाना चाहिए।

— निकी उज़ून
स्रोत

2

मैंने ABP, कोणीय और ASP.NET कोर के उपयोग से एक प्लगइन आर्किटेक्चर को लागू करने की कोशिश की: https://github.com/chanjunweimy/abp_plugin_with_ui

असल में, मैंने विभिन्न कोणीय एप्लिकेशन का उपयोग करके कोणीय प्लगइन्स विकसित किए हैं, फिर मैं गतिशील रूप से उन्हें एक साथ जोड़ता हूं।

मैं इसे कैसे प्राप्त करता हूं, इस बारे में अधिक जानकारी:

मेरे पास 2 कोणीय- cli एप्लिकेशन है, 1 मुख्य कोणीय cli एप्लिकेशन है, और दूसरा प्लगइन कोणीय cli एप्लिकेशन है। हम कोणीय-क्ली प्लगइन आर्किटेक्चर दृष्टिकोण में जिस समस्या का सामना कर रहे हैं वह है कि हम उन्हें कैसे एकीकृत करते हैं।

अभी, मैंने जो किया था, मैं दोनों अनुप्रयोगों पर एनजी-बिल्ड चलाता हूं, और उन्हें "wwwrootot" फ़ोल्डर में डाल दिया, जो तब ASP.NET कोर 2.0 सर्वर में होस्ट किया गया था। एक सरल रिपॉजिटरी जो इस विचार को दिखाती है वह है Angular Multiple App: https://github.com/chanjunweimy/angular-multiple-app

abp_plugin_with_ui एक रिपॉजिटरी है जो एक प्लगइन को विकसित करने पर काम करती है जिसमें बैकएंड और एंग्लो दोनों शामिल हैं। बैकएंड के लिए, मैंने एस्पेनेटोप्लेटप्लेट फ्रेमवर्क का उपयोग किया, जो कि कई कोणीय-क्ली एप्लिकेशन का उपयोग करके फ्रंटेंड विकसित किया गया है।

मुख्य एप्लिकेशन को प्लगइन एप्लिकेशन के साथ एकीकृत करने के लिए, हमें एप्लिकेशन (नोट के साथ-साथ प्लगइन एप्लिकेशन के href में बदलना होगा) दोनों पर "एनजी-बिल्ड" चलाना होगा, फिर हम प्लगइन की निर्मित सामग्री को स्थानांतरित करते हैं। मुख्य अनुप्रयोग "wwwroot" फ़ोल्डर में कोणीय cli अनुप्रयोग। यह सब प्राप्त करने के बाद, हम "डॉट बिल्ड" द्वारा उत्पन्न स्थिर फ़ाइलों की मेजबानी के लिए ASP.NET Core 2.0 वेब एप्लिकेशन की सेवा के लिए "डॉटनेट रन" चला सकते हैं।

उम्मीद है कि यह मदद करता है। किसी भी टिप्पणी का स्वागत है! ^^

— जुनेवि चैन
स्रोत

मैं आपके प्लगइन डॉक्स का पालन करने की कोशिश कर रहा हूं, लेकिन मुझे लगता है कि प्रलेखन कुछ चरणों को छोड़ रहा है। अगर मैं इसे गलत बता रहा हूं तो मैं माफी मांगता हूं। पूरे 'एक प्लगइन जोड़ने' टुकड़ा मेरे लिए स्पष्ट नहीं है। मैंने इस कदम का अनुसरण किया, लेकिन मैं वास्तव में परिणाम नहीं देख रहा हूं। पावर शेल चलाने के बाद मुझे पोर्ट 4200 पर क्या देखना चाहिए? मुझे /aspnet-core/src/Todo.MainProject.Web.Host/ में प्लगइन्स फ़ोल्डर दिखाई नहीं देता है। मैंने शक्तियां चलाईं, और वह फ़ोल्डर नहीं बनाया गया था। किसी भी मदद की सराहना की। मुझे लगता है कि आपका दृष्टिकोण वही है जिसकी मुझे आवश्यकता है, लेकिन मैं थोड़ा फ़र्ज़ी हूं कि यह अभी तक कैसे काम करता है।

— ब्रायन किट

ठीक। मुझे सवाल पूछने से पहले ऐसा करना चाहिए था। मैंने डिबगिंग में समय बिताया, और अपने जवाबों का पता लगाया। # 1) पॉवरशेल में .zip नहीं है जहाँ उसे जाने की जरूरत है, मुझे प्लगइन फ़ोल्डर बनाने की जरूरत है, और ज़िप को स्थानांतरित करें। # 2) जब कोणीय ऐप शुरू होता है, तो यह गतिशील रूप से लोडर को कॉल करता है, और प्लगइन्स को वेबरॉट में कॉपी करता है। यह एक तरह से वर्तनी थी, लेकिन अब मैं इसे प्राप्त करता हूं। # 3) मुझे प्लगइन का उपयोग करने के लिए यूआरएल का उपयोग करना होगा, यह कहीं भी दिखाई नहीं देता है। मैं उम्मीद कर रहा था कि यह डैशबोर्ड पर होगा। आपके काम के लिए धन्यवाद, यह कोड का एक महत्वपूर्ण हिस्सा है।

— ब्रायन किट

2

थोड़ा सा विषय, लेकिन यूआई घटक पुस्तकालय कुछ पाठकों के लिए रुचि के हो सकते हैं, जो प्लगइन्स की खोज करते हैं:
https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the -angular-CLI और एनजी-packagr-53b2ade0701e

NativeScript में बिल्ड-इन UI प्लगइन्स हैं:
https://docs.nativescript.org/plugins/building-plugins
उन प्लगइन्स को एक कोणीय आवरण की आवश्यकता होती है:
https://docs.nativescript.org/plugins/angular-plugin

— RaSor
स्रोत

2

मैं वर्तमान में आप के रूप में एक ही खोज में हूँ, कोणीय के एक प्लग-एंड / थेबल संस्करण बनाने की कोशिश कर रहा हूं, और यह एक तुच्छ समस्या नहीं है।

मैं वास्तव में पाया बहुत अच्छा समाधान, जीनियस Denys Vuyika द्वारा कोणीय के साथ विकासशील पुस्तक को पढ़ने , वह वास्तव में पुस्तक पर एक बहुत अच्छा समाधान बताते हैं, वह पुस्तक के पृष्ठ 356 पर बाहरी प्लगइन्स के बारे में बात करता है और इसे प्राप्त करने के लिए Rollup.js का उपयोग करता है । समाधान, वह फिर बाहरी प्लगइन्स को गतिशील रूप से लोड करने की प्रक्रिया करता है जो पहले आपके एप्लिकेशन के बाहर बनाया गया है।

दो अन्य पुस्तकालय / परियोजनाएं भी हैं जो आपको इस परिणाम को हासिल करने में मदद करती हैं एनजी-पैकग्रे और एनएक्स एक्सटेंशन अग्नुलर (नर्वल से) हम बाद को लागू करने के लिए बांध रहे हैं, और मैं कहूंगा कि यह उतना आसान नहीं है जितना कि हम अनुमान लगाते हैं, कोणीय सरल था उसके लिए नहीं बनाया गया है, इसलिए हमें कुछ कोर के आसपास काम करना होगा कि कैसे कोणीय, और NX ppls उस पर सर्वश्रेष्ठ में से एक हैं।

हम केवल अपने ओपन सोर्स प्रोजेक्ट की शुरुआत में हैं, हम Django + Mongo + Angular का उपयोग कर रहे हैं, (हम WebDjangular और इस उत्तर के लिए हमारे संभावित दृष्टिकोणों में से एक कह रहे हैं , यह है कि Django को कुछ JSON कॉन्फ़िगरेशन फ़ाइलों को लिखना होगा और निर्माण करना होगा। हर बार एक नया प्लगइन या थीम स्थापित और सक्रिय किया जाता है।

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

मुझे आशा है कि पुस्तक आपकी मदद कर सकती है, और रोलअप.जेएस का उपयोग करके मुझे पता है कि आप इस गैर तुच्छ समस्या को क्रैक करने में सक्षम होंगे।

— पाउलो पेरेस जूनियर
स्रोत

0

मुझे पॉल Ionescu से एक अच्छा लेख मिला कि कैसे कोणीय में एक प्लगइन एक्स्टेंसिबल एप्लिकेशन का निर्माण किया जाए।

https://itnext.io/how-to-build-a-plugin-extensible-application-architecture-in-angular5-736890278f3f

वह जीथब पर एक उदाहरण के आवेदन का भी संदर्भ देता है: https://github.com/ionepaul/angular-plugin-nectureure

— मारविन कैस्पर
स्रोत