Angular: एक आलसी लोडेड NgModule के प्रवेश घटक मॉड्यूल के बाहर उपलब्ध नहीं हैं

धन्यवाद @jmcclanahan। क्या आप हमें इस बारे में कुछ और बता सकते हैं कि यह सेवा कैसी दिखती है और इसे कैसे स्थापित किया जाता है? मैं एक समान मुद्दे से जूझ रहा हूं, एक आलसी लोड मॉड्यूल से एक घटक को दूसरे आलसी लोड मॉड्यूल से गतिशील रूप से लोड करने का प्रयास कर रहा हूं और भले ही (मुझे लगता है) मैंने सही जगह पर प्रवेश घटकों को जोड़ा है, मुझे बताया गया है I नहीं है। धन्यवाद

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

मैं टूलबार सेवा के साथ केवल एक अवलोकन योग्य बना रहा हूं, इसलिए आपका आलसी घटक componentFactoryResolver और injector टूलबार सामान्य घटक के संदर्भों को पास कर सकता है जो receiveContext के लिए सुन रहा है

toolbar.service.ts

@Injectable()
export class ToolbarService {
    contextReceivedSource = new Subject<any>();
    contextReceived$ = this.contextReceivedSource.asObservable();

    receiveContext(componentFactoryResolver: ComponentFactoryResolver, injector: Injector) {
        this.contextReceivedSource.next({ resolver: componentFactoryResolver, injector: injector });
    }
}

अपने आलसी लोड किए गए घटक में आप componentFactoryResolver और injector इंजेक्ट करना चाहेंगे और टूलबार सेवा में एक ईवेंट को सक्रिय करना चाहेंगे।

आलसी लोडेड टूलबार घटक

...
constructor(private componentFactoryResolver: ComponentFactoryResolver, private injector: Injector) {}
...
ngOnInit() {
  this.toolbarService.receiveContext(this.componentFactoryResolver, this.injector);
}
...

अंत में, मेरे मूल टूलबार घटक में मैं टूलबार सेवा में देखने योग्य की सदस्यता ले रहा हूं ताकि जब भी कोई ईवेंट निकाल दिया जाए तो वह आलसी घटक को इंजेक्ट करने और बनाने की कोशिश करेगा जिसकी मुझे आवश्यकता है। आपके द्वारा बनाए गए componentRef को नष्ट करना भी महत्वपूर्ण है अन्यथा आप मेमोरी लीक के साथ समाप्त हो जाएंगे।

...
@ViewChild('toolbarTarget', {read: ViewContainerRef}) toolbarTarget: ViewContainerRef;
component: Type<Component>;
refInjector: ReflectiveInjector;
resolverSub: Subscription;
refInjector: ReflectiveInjector;
componentFactoryResolver: ComponentFactoryResolver;
injector: Injector;

ngOnInit() {
  this.resolverSub = this.toolbarService.contextReceived$.subscribe(resolver => {
      this.componentFactoryResolver = resolver.resolver;
      this.injector = resolver.injector;
    });
}

updateToolbar(data: any) {
    this.clearComponent();
    this.component = data['toolbar'];
    if (this.component) {
      const childComponent = this.componentFactoryResolver.resolveComponentFactory(this.component);
      this.refInjector = ReflectiveInjector
          .resolveAndCreate([{provide: this.component, useValue: this.component}], this.injector);
      this.componentRef = this.toolbarTarget.createComponent(childComponent, 0, this.refInjector);
    }
  }

  clearComponent() {
    this.toolbarTarget.clear();
    if (this.componentRef) { this.componentRef.destroy(); };
  }

  ngOnDestroy() {
    this.resolverSub.unsubscribe();
    this.clearComponent();
  }

आपका गतिशील रूप से बनाया गया घटक तब कहीं भी रखा जाएगा जहां आप संबंधित #toolbarTarget . डालते हैं

<div #toolbarTarget></div>

एक तरफ के रूप में, मैं मार्ग से आलसी लोड घटक संदर्भ प्राप्त करने के लिए सामान्य टूलबार घटक में इस लाइन this.component = data['toolbar']; का उपयोग कर रहा हूं। यदि आप इसके लिए पूरा कोड देखना चाहते हैं तो मैं इसे पोस्ट कर सकता हूं, लेकिन यह इस चर्चा के दायरे से बाहर है।

{ path: '', component: yourComponent, data: { toolbar: yourToolbarComponentToInject } }

और अधिक प्रश्न होने पर मुझसे पूछें!

@jmcclanahan मेरे पास आपके कोड के बारे में एक प्रश्न (शायद एक बेवकूफ) है, जब आप "आलसी लोड टूलबार घटक" का उल्लेख करते हैं, तो आप सेवा कॉल कोड को ngOnInit अनुभाग में डालते हैं, लेकिन आप इसे कैसे शुरू करते हैं (घटक) इसे HTML कोड में जोड़ने और बाद में इसे DOM में छिपाने के बिना? चूंकि उस घटक का उपयोग केवल टॉपबार में किया जा रहा है, मैं इसे पहले कहीं और लोड नहीं करता।

@ डूनोस - मुझे एहसास हुआ कि मैंने उपरोक्त मेरे उदाहरण से उस हिस्से को पूरी तरह से छोड़ दिया है, इसके बारे में खेद है! आप डायनामिक घटक को entryComponent के रूप में उस आलसी लोडेड मॉड्यूल में जोड़ना चाहेंगे जिससे यह जुड़ा हुआ है।

फिर टूलबार घटक में ही आप एक ViewContainerRef परिभाषित करेंगे जो आपके एचटीएमएल टेम्पलेट में उस स्थान को संदर्भित करेगा जहां आप गतिशील घटक प्रदर्शित करना चाहते हैं। फिर updateToolbar() मेथड आपके कंपोनेंट को बनाने, उसे निर्दिष्ट स्थान पर रखने और कंपोनेंट को टूलबार पर दिखाने का ध्यान रखेगी।

@ViewChild('toolbarTarget', {read: ViewContainerRef}) toolbarTarget: ViewContainerRef;
...
updateToolbar(data: any) {
    this.clearComponent();
    this.component = data['toolbar'];
    if (this.component) {
      const childComponent = this.componentFactoryResolver.resolveComponentFactory(this.component);
      this.refInjector = ReflectiveInjector
          .resolveAndCreate([{provide: this.component, useValue: this.component}], this.injector);
      this.componentRef = this.toolbarTarget.createComponent(childComponent, 0, this.refInjector);
    }
  }

आपका गतिशील रूप से बनाया गया घटक तब कहीं भी रखा जाएगा जहां आप संबंधित #toolbarTarget . डालते हैं

<div #toolbarTarget></div>

जब भी ngOnDestroy () चलाया जाता है, तो clearComponent () विधि को कॉल किया जाता है, जो पृष्ठ छोड़ने पर घटक को छिपाने का ध्यान रखता है।

clearComponent() {
    this.toolbarTarget.clear();
    if (this.componentRef) { this.componentRef.destroy(); };
  }

  ngOnDestroy() {
    this.resolverSub.unsubscribe();
    this.clearComponent();
  }

मैंने ऊपर अपनी मूल पोस्ट भी अपडेट की है। मुझे इसके बारे में बहुत सारे प्रश्न मिल रहे हैं, इसलिए मैं जितनी जल्दी हो सके इस गतिशील टूलबार का उपयोग करके एक कार्यशील उदाहरण जोड़ूंगा और आप लोगों को एक लिंक के साथ अपडेट करूंगा।

@jmcclanahan जो मुझे मिलता है (मुझे लगता है), लेकिन मुझे अभी भी समझ में नहीं आता है कि डायनामिक घटक ( this.toolbarService.receiveContext कॉल पार्ट) से सेवा को कॉल कैसे किया जाता है क्योंकि ngOnInit को कभी भी कॉल नहीं किया जाता है (या मैं डॉन ' टी देखें कि ऐसा कैसे करें)। मैंने एंट्री कॉम्पोनेंट्स में जोड़ा लेकिन ऑनइनिट को काम करने के लिए इसे कुछ हद तक प्रारंभ करने की आवश्यकता है।

@ डूनोस - शायद एक उदाहरण सबसे अच्छा होगा। मान लें कि मैं अपने ऐप के इंडेक्स पेज से पेज ए पर नेविगेट कर रहा हूं। आपके पास पेज ए के लिए एक संबंधित मार्ग होगा, जो पेज ए के मॉड्यूल/घटक को परिभाषित करेगा। पेज ए में एक अलग घटक भी परिभाषित किया जाएगा जिसे मैं वैश्विक टूलबार में प्रदर्शित करना चाहता हूं। तो, पेज ए के मुख्य घटक के अंदर आप ComponentFactoryResolver और Injector इंजेक्ट करेंगे और फिर receiveContext ईवेंट को आग लगा देंगे। कोड का यह बिट:

constructor(private componentFactoryResolver: ComponentFactoryResolver, private injector: Injector) {}
...
ngOnInit() {
  this.toolbarService.receiveContext(this.componentFactoryResolver, this.injector);
}

क्षमा करें, मैं देख सकता था कि यह कैसे भ्रमित हो सकता है। आप उस कोड को उस घटक में नहीं डालते हैं जिसे आप टूलबार में प्रदर्शित करना चाहते हैं, बल्कि उस पृष्ठ से जुड़े घटक को डालते हैं जिस पर आप हैं।

@jmcclanahan आह बिल्कुल सही, बहुत धन्यवाद !!! यह अब काम कर रहा है :)

@jmcclanahan मैंने इस पोस्ट को खोजने से पहले उसी मुद्दे को हल किया। एक बात मैंने देखी है कि यदि आप अपने फ़ंक्शन घोषणाओं में कुछ वर्णों को सहेजना चाहते हैं, तो आप अपने द्वारा पास किए गए इंजेक्टर का उपयोग करके ComponentFactoryResolver का संदर्भ प्राप्त कर सकते हैं। आप बस कर सकते हैं:
injector.get(ComponentFactoryResolver);

और उस संदर्भ को वापस करना चाहिए जिसकी आपको आवश्यकता है। लेकिन अंत में यह फ़ंक्शन में पैरामीटर के रूप में ComponentFactoryResolver को पास करने के समान परिणाम देता है।

यह मेरी समस्या को भी हल करता है।

संक्षेप में, आपको केवल यह जानने की आवश्यकता है कि जब आप एक आलसी मॉड्यूल में घोषित घटक को गतिशील रूप से बनाना चाहते हैं, तो आपको वास्तव में उस आलसी मॉड्यूल में घोषित घटक से ComponentFactoryResolver का उपयोग करने की आवश्यकता होती है। रूट इंजेक्टर (जिसमें रूट कंपोनेंट फैक्ट्री रीसोल्वर होता है) लोड किए गए आलसी मॉड्यूल में घोषित किसी भी एंट्री कॉम्पोनेंट्स के बारे में नहीं जानता।

थोड़ा अजीब लग रहा है, लेकिन इस तरह से कोणीय को डिज़ाइन किया गया है (जो समझ में आता है) लेकिन यह वास्तव में ढांचे के साथ काम करते समय अतिरिक्त जटिलता पैदा करता है, इम्हो।

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

मैं इसके लिए एक फीचर अनुरोध सबमिट करूंगा।

शुक्रिया!

बहुत धन्यवाद @jmcclanahan

@jmcclanahan बहुत बहुत धन्यवाद !! @renatoaraujoc क्या आपने यह सुविधा एंगुलर टीम को सबमिट की है?

@rraya मैंने इस "मुद्दे" के बारे में एक फीचर अनुरोध सबमिट किया है (यदि आप इसके बारे में सोचते हैं तो यह वास्तव में कोई समस्या नहीं है), कृपया # 17168 देखें।

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

@jmcclanahan लेकिन मैं अभी भी आपकी समझ में नहीं आ रहा हूं, अगर कुछ सुझाव हैं तो बहुत धन्यवाद। ऐसा लगता है कि 'this.componentFactoryResolver.resolveComponentFactory' पर कुछ त्रुटि हुई है।

@ डूनोस क्या आप मुझे एक हाथ दे सकते हैं? मुझे हफ्तों तक एक ही समस्या का सामना करना पड़ा, और यह वास्तव में सिरदर्द है।

@वर्ट्स ,

आपको केवल यह समझने की आवश्यकता है कि जब भी आप आलसी लोड किए गए मार्ग पर नेविगेट करते हैं, तो सक्रिय मार्ग एक बच्चे इंजेक्टर को जन्म देगा जिसमें उस आलसी मॉड्यूल के लिए एंट्रीकंपोनेंट्स शामिल होंगे। यदि आपके पास AppModule (जो कि एप्लिकेशन का रूट इंजेक्टर है) में परिभाषित एक वैश्विक modalService है, तो कंपोनेंटFactoryResolver किसी भी नए एंट्रीकंपोनेंट्स को किसी भी आलसी मॉड्यूल से नहीं जान पाएगा। तो, इस मुद्दे को हल करने के तरीकों में से एक आलसी मॉड्यूल के घटक से पूरक फैक्ट्री रीसोलवर का उदाहरण प्राप्त करना है और किसी भी तरह से मोडल सेवा को बताएं "अरे, वांछित प्रविष्टि कॉम्पोनेंट प्रस्तुत करने के लिए इस इंजेक्टर/घटक फैक्ट्री रीसोल्वर का उपयोग करें"।

समझने में थोड़ा मुश्किल लगता है लेकिन ऐसा नहीं है।

@renatoaraujoc आपकी व्याख्या के लिए धन्यवाद, मेरे उपयोग के मामले में, मैं एक लिंक से घटक लोड करना चाहता हूं, कहने के लिए, मैं बाएं साइडबार से मेनू पर क्लिक करता हूं, और मैं एक आलसी लोड मॉड्यूल से मॉड्यूल पुनर्प्राप्त करूंगा, और फिर, मैं बनाउंगा एक गतिशील घटक, क्योंकि मैं एक टैब जैसा ऐप बनाना चाहता हूं, इसलिए, सही मुख्य सामग्री क्षेत्र में, कुछ घटक सामग्री हैं, यदि मैं टैब ट्रिगर पर क्लिक करता हूं, तो सामग्री दिखाई देगी। या कोई समाधान निर्माण टैब है- कोणीय 2/4 के माध्यम से ऐप की तरह?

वैसे भी, आलसी लोड घटक कभी भी init नहीं हो सकता है, मैं सेवा को इसके घटक फैक्ट्री रिसोल्वर को कैसे बता सकता हूं?

मेरे ऐप के लिए, एक AppModule है, और इसमें CoreModule है, इसलिए, मेरा ContentTabModule (टैबसेट लोड करने के लिए प्रयुक्त) CoreModule से संबंधित है, ContentTabModule द्वारा संचालित सभी घटक, इसमें सेवा, घटक, निर्देश, पाइप है, जब एक मेनू पर क्लिक करें लिंक, ContentTabService मेनू params से एक गतिशील घटक बनाएगा। मैंने नेटवर्क पैनल पर लोड किए गए कुछ ट्रंक (मैं वेबपैक का उपयोग करता हूं) देखा है। और फिर मैं आलसी लोड मॉड्यूल पर प्रदर्शित घटक बनाना चाहता हूं।

@renatoaraujoc मैं आलसी मॉड्यूल के घटक से पूरक फैक्ट्री रीसोलवर का उदाहरण कैसे प्राप्त कर सकता हूं? मुझे लगता है कि यह और अधिक कठिन है, क्योंकि आलसी मॉड्यूल का घटक कभी भी init नहीं होता है (या मैं गलत हूं)

@werts ऊपर @jmcclanahan के साथ हुई बातचीत की जांच करें, हमने टूलबार के साथ कुछ इसी तरह की बात की।

@Dunos मैं @jmcclanahan से उदाहरण को समझ नहीं पा रहा हूं, मुझे लगता है कि मैं वही पीड़ित हूं। आलसी लोड घटक कभी भी init नहीं होता है।
this.toolbarService.receiveContext () को आलसी लोड मॉड्यूल से कहा जाता है?

@werts आपको आलसी मॉड्यूल के मुख्य घटक को मार्गों के साथ लोड करना होगा, और वह घटक वह है जो ऑक्स सेवा को अपने इंजेक्टर और कंपोनेंट फैक्ट्री रीसोलवर के साथ कॉल करता है।

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

@werts ... हाँ, यह संभव है। शुरुआती बिंदु के लिए https://github.com/Toxicable/module-loading देखें ।

ठीक है, इसे अभी आज़माएं, thx। @mlc-mlapis

@werts et al: क्या मैं अनुशंसा कर सकता हूं कि आप इस समर्थन सूत्र को किसी अन्य चैनल पर ले जाएं? StackOverflow या Gitter अधिक उपयुक्त हो सकता है। वैसे भी, मैंने इस मुद्दे की सदस्यता ली है (जैसा कि मुझे यकीन है कि कई अन्य हैं) और यह अभी बहुत शोर पैदा कर रहा है जो थोड़ा हटकर हो रहा है।

प्लस साइड पर: ऐसे मददगार समुदाय को देखकर बहुत अच्छा लगा!

मुझे विश्वास नहीं हो रहा है कि यह मुद्दा भी एक और रोड ब्लॉक है जिसका मुझे आलसी लोड मॉड्यूल के साथ सामना करना पड़ता है। मैं अपने आलसी मॉड्यूल के बच्चों को इसके माता-पिता (app.module) से गुमनाम रखने के लिए एक समाधान की तलाश में हूं ताकि जरूरत पड़ने पर मैं आलसी मॉड्यूल को आसानी से हटा/निर्यात कर सकूं। app.component.html में एक ऐप वाइड <router-outlet name="app-popup"> जितना सरल कुछ के लिए (जिसे मैंने इस उम्मीद में छोड़ दिया है कि ComponentFactory अपने काम को बदल सकता है) बस आलसी बच्चों के घटकों को लोड करना बहुत कठिन रहा है। अब केवल आलसी-मॉड्यूल प्रवेश-बच्चों के साथ प्रवेश-घटकों के मुद्दे पर आते हैं। अगर मुझे आलसी बच्चों के घटकों को पंजीकृत करने के लिए रूट मॉड्यूल की आवश्यकता है तो मेरे मॉड्यूल को ठीक से अलग रखना संभव नहीं है। मैं उम्मीद कर रहा हूं कि एंगुलर टीम जल्द ही इसे एक मुद्दे के रूप में समझेगी और इसे हल करेगी। मैं अभी भी उनके लिए आलसी-मॉड्यूल के लिए ऐप-वाइड राउटर-आउटलेट के साथ मेरी समस्या का जवाब देने की प्रतीक्षा कर रहा हूं। https://github.com/angular/angular/issues/19520

शुरुआत में कुछ नहीं था,
'चलो एक दृश्य बनाते हैं! ', jQuery टीम का कहना है,
'चलो एक सूची है! ', कोणीय टीम कहते हैं।

@jmcclanahan हमें अब ngComponentOutlet मिल गया है, यह चीजों को बहुत आसान बनाता है।

<ng-container  *ngComponentOutlet="yourComponentClass;injector: yourInjector;"></ng-container>

@crysislinux ngComponentOutlet बहुत अच्छा है लेकिन यह हमें घटक को डेटा पास करने की अनुमति नहीं देता है, इसलिए यह कोई समाधान नहीं है।

इस फीचर के बारे में कोई खबर? =/

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

मैं उत्सुक हूं: क्या यह समस्या ui- राउटर के उपयोग से हल हो गई है? या शायद कोणीय के अपने राउटर के कई आउटलेट क्षमता भी? क्या वे इस तर्क को पर्दे के पीछे करते हैं? यह मेरे लिए कोणीय 1.x में एक बहुत ही सामान्य मामला है और मैं इसे कोणीय 2+ . में बदलने की कोशिश कर रहा हूं

टूलबार उदाहरण में, ui-view (शायद एक नामित दृश्य, या कोणीय राउटर के मामले में राउटर आउटलेट), एक उच्च स्तरीय मॉड्यूल में सेटअप किया जाएगा। यदि एक आलसी लोडेड मॉड्यूल स्थिति टूलबार ui-view को अपनी सामग्री से बदल देती है, तो उसे केवल "काम" करना होगा या ui-राउटर आलसी लोडेड वातावरण में कार्य नहीं करेगा जहां वर्तमान मॉड्यूल के बाहर उच्च स्तर के दृश्यों को प्रतिस्थापित करने की आवश्यकता है . यह कोणीय 1.x की तुलना में अत्यंत सीमित होगा।

उपरोक्त उदाहरण ऐसा लगता है कि यह उसी चीज को हल कर रहा है जिसे हल करने के लिए यूआई-राउटर/कोणीय राउटर को डिज़ाइन किया गया है। क्या मुझे कुछ याद नहीं आ रहा है?

... हम शायद खो गए हैं क्या समस्या है। जैसा कि हम जानते हैं और हर दिन उपयोग करते हैं, आलसी लोड मॉड्यूल से घटकों का उपयोग करने में कोई समस्या नहीं है ... यहां तक ​​​​कि राउटर के माध्यम से या प्रोग्रामेटिक रूप से हमारे अपने कोड द्वारा।

ऊपर @jmcclanahan उदाहरण का उपयोग करते समय यह मेरे उपयोग के मामले के लिए अच्छा काम करता प्रतीत होता है।

मुझे this.componentRef.changeDetectorRef.markForCheck(); के बाद this.componentRef = this.toolbarTarget.createComponent(childComponent, 0, this.refInjector);. . जोड़ना पड़ा

इसने होस्टबाइंडिंग गुणों के साथ ट्रिगर नहीं होने वाली एक समस्या को ठीक किया।

मुझे लगा कि मैं एक संभावित समाधान पर एक स्विंग लूंगा जिसने मेरे लिए काम किया है। यह मूल प्लंकर का कांटा है।
http://plnkr.co/edit/x3fdwqrFDQr2og0p6gwr?p=preview

इसके आसपास काम करने के लिए आपको मॉड्यूल में प्रदान की गई सेवा (ResolverService) से घटक कारखाने को हल करने की आवश्यकता है जिसमें entryComponent (Page1Module) है। इसके बाद इसे दूसरी सेवा (चेंजर सर्विस) को पास कर दिया जाता है जो हल किए गए कारखाने का उपयोग करता है और घटक को मेनकंपोनेंट पर दृश्य में जोड़ता है।

जो मैं गंभीरता से नहीं समझता वह यह भगवान लानत राउटर है। इस प्लंकर को जांचें ( @patkoeller के उदाहरण से फोर्क किया गया)
http://plnkr.co/edit/keMuCdU9BwBDNcaMUAEU?p=पूर्वावलोकन @ src/page1.ts

मैं मूल रूप से जो करना चाहता हूं वह कुछ घटक को टॉपलेवल ऐप में इंजेक्ट करना है और इसके परिभाषित आलसी लोड मॉड्यूल के सापेक्ष कमांड के साथ [routerLink] निर्देश का उपयोग करना है: [routerLink]="['./', 'sub', 'component'] /page-1/sub/component उत्पन्न करने के लिए। अगर मैं कुछ ActivatedRoute $ के साथ createComponent में इंजेक्टर पास करता हूं और यह मेरे मामले के लिए काम करता है तो यह हर दूसरे राउटर लिंक को खराब कर देता है, लेकिन अगर मैं router.routerState.snapshot को state पर पुन: असाइन करता हूं संकल्प से

क्या मुझे बग फाइल करनी चाहिए?

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

इस पर कोई नया ईटीए? या कम से कम कोणीय टीम से प्रतिक्रिया? इस कार्यक्षमता का न होना एक वास्तविक गिरावट है क्योंकि मॉड्यूल एनकैप्सुलेशन अभी खिड़की से बाहर फेंक दिया गया है। @angular/material के सभी डायलॉग्स को रूट मॉड्यूल में इम्पोर्ट करने की जरूरत है।

@ xban1x मुझे नहीं लगता कि इसमें कोई प्रगति हुई है। हमें इसका पूर्वाभ्यास करना होगा :(

@jmcclanahan क्या आपके दृष्टिकोण का उपयोग करके इंजेक्शन घटक का संदर्भ प्राप्त करना संभव है? मैंने एक घटक को सफलतापूर्वक इंजेक्शन दिया है, यह एक पेड़ बीटीडब्ल्यू है, इसलिए अब मुझे पेड़ को इंजेक्शन देने वाले घटक में पेड़ क्लिक घटनाओं पर सदस्यता लेने की आवश्यकता है। क्या इसको मदद देने का कोई तरीका है?

अंक #23819 में मैंने प्रवेश घटकों को उसी तरह से व्यवहार करने के बारे में पूछा जैसे सेवाओं के साथ providesIn: 'root' । उस मुद्दे को बंद कर दिया क्योंकि ऐसा लगता है कि दोनों मुद्दों को एक ही चीज़ को हल करने का इरादा है। मुझे उम्मीद है कि यह समस्या जल्द ही हल हो जाएगी क्योंकि यह एक महत्वपूर्ण विशेषता है :)

अद्यतन

गैर-छोटा कोड में जो मैं देखता हूं, जब सेवा में providesIn परिभाषित किया जाता है, तो यह कारखाने को पंजीकृत करता है ताकि इसे पहले से ही इस्तेमाल किया जा सके (इसे मॉड्यूल में आयात करने की आवश्यकता के बिना), अगर मुझे समझ में आया सही ढंग से:

var Injectable = makeDecorator('Injectable', undefined, undefined, undefined, function (injectableType, options) {
    if (options && options.providedIn !== undefined &&
        injectableType.ngInjectableDef === undefined) {
        injectableType.ngInjectableDef = defineInjectable({
            providedIn: options.providedIn,
            factory: convertInjectableProviderToFactory(injectableType, options)
        });
    }
});

मुझे लगता है कि @Component({ ... entryComponent: true }) जैसे कुछ विकल्प के साथ एक घटक में एक समान तर्क लागू करने का एक तरीका है ताकि जब इसमें शामिल खंड लोड हो जाए, तो कारखाने को रिज़ॉल्वर में परिभाषित किया जाता है (एक मॉड्यूल होना चाहिए जिसमें शामिल है घटक निर्भरता के साथ entryComponents में घटक, अन्यथा यह एक संकलन समय त्रुटि का कारण होगा)।

@lucasbasquerotto ... हम मॉड्यूल लोड करने के लिए निम्नलिखित तर्क का उपयोग करते हैं और इसके घटक प्रकारों का उपयोग करते हैं (स्ट्रिंग कुंजियों के बीच हमारे अपने मैपिंग के साथ <-> उस मॉड्यूल में सीधे संग्रहीत घटक प्रकार):

this._loader.load(url)
    .then((_ngModuleFactory: NgModuleFactory<any>) => {
        const _ngModuleRef: NgModuleRef<any> = _ngModuleFactory.create(this._injector);
        const _cmpType: Type<any> = _ngModuleRef.instance.cmps.get('dynamic');
        const _cmpFactory: ComponentFactory<any> = _ngModuleRef
            .componentFactoryResolver
            .resolveComponentFactory(_cmpType);
        this._cmpRef = this.vc.createComponent(_cmpFactory, 0, this._injector, []);
    });

हैलो दोस्तों, अभी के लिए मैं सिंगलटन क्लास रखने के वर्कअराउंड का भी उपयोग कर रहा हूं जो कई आलसी-लोडेड मॉड्यूल रिज़ॉल्वर के संदर्भ को बनाए रखता है।
क्या कोणीय के नए संस्करण के साथ इसे संभालने का कोई बेहतर तरीका है?
धन्यवाद

ज़रा सुनिए सभी,

बस उसी समस्या का सामना करना पड़ रहा है और मैं अपने समाधान के लिए बूटस्ट्रैप के रूप में वर्कअराउंड का उपयोग करता हूं।

इस पर आगे बढ़ने और वैश्विक सेवा की आवश्यकता को कम करने का एक तरीका, रूटकॉन्फिगलोडएंड इवेंट के लोड किए गए कॉन्फिग निजी चर का पर्दाफाश करना होगा। LoadedRouterConfig प्रकार के इस निजी चर में लोडेड मॉड्यूल, इसके इंजेक्टर और इसके घटकFactoryResolver शामिल हैं।

क्या मुझे इसे फीचर अनुरोध के रूप में प्रस्तावित करने के लिए एक नया मुद्दा खोलना चाहिए?
------------- संपादित करने के बाद

मेरे प्रश्न पर कोई फर्क नहीं पड़ता, मुझे यह सुविधा अनुरोध https://github.com/angular/angular/issues/24069 मिला

मुझे लगता है कि मेरे पास एक ही समस्या है, लेकिन मेरा अतिरिक्त मॉड्यूल lazy loaded नहीं है। मुझे अपने entryModules को SharedFeatureModule (जो केवल जरूरत पड़ने पर लोड किया जाता है) से CoreModule में स्थानांतरित करना होगा।
अब यह काम कर रहा है। लेकिन मैंने फीचर से संबंधित घटक को कोर में स्थानांतरित कर दिया जो मेरी राय में ठीक नहीं है।

यह मुद्दा अभी भी हल नहीं हुआ है?

@jmcclanahan का समाधान

{ path: '', component: yourComponent, data: { toolbar: yourToolbarComponentToInject } }

अंत में एक अतिरिक्त खाली मार्ग जोड़ता है। जब मैं एक गतिशील ब्रेडक्रंब बनाने की कोशिश करता हूं, तो यह एक समस्या बन रही है।

घटक के लिए इस रिक्त मार्ग डिफ़ॉल्ट को जोड़ने के बिना, मैं आलसी बच्चे मॉड्यूल में बूटस्ट्रैप के समान कुछ रखना पसंद करता हूं।

इस पर कोई अपडेट?

हमारे कस्टम समाधान में प्रत्येक घटक में ComponentFactoryResolver और Injector को कंस्ट्रक्टर-इंजेक्ट करना शामिल है जो हमारे वैश्विक साइडबार को खोल सकता है। कॉलिंग घटक तब उन संदर्भों (स्वयं के) को वांछित Component के साथ एक सेवा में भेजता है। घटक बनाने के लिए सेवा उन उदाहरणों का उपयोग करती है। अति-जटिल और अति-क्रिया।

बस अपने प्रवेश घटकों को अपने स्वयं के सबमॉड्यूल में डालें और इसे ऐप में आयात करें और कहीं नहीं।

@broweratcognitecdotcom मुझे लगता है कि इस मुद्दे का मुद्दा आलसी लोड मॉड्यूल में entryComponents के लिए है। प्रत्येक घटक के सभी सबमॉड्यूल को शामिल करना जिसे आप AppModule में एक प्रविष्टि घटक के रूप में उपयोग करना चाहते हैं, ऐसे सभी घटकों को उत्सुकता से लोड करने के लिए बाध्य करेगा, जो स्टार्टअप पर प्रदर्शन के मुद्दों का कारण बन सकता है।

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

@lucasbasquerotto ... ऐसे आलसी मॉड्यूल प्रोग्रामेटिक रूप से लोड करें ... आपके पास पूर्ण नियंत्रण है, और यह बस काम करता है।

मैं एक अजीब मुद्दे का सामना करने के बाद इस धागे पर ठोकर खाई, जहां मैं स्ट्रिंग कुंजियों और संबंधित घटकों के मानचित्र का उपयोग करके रूट रिज़ॉल्वर से घटक को हल नहीं कर सका। मैं सचमुच _factories मानचित्र में घटक देख सकता हूं लेकिन किसी भी तरह से यह सही ढंग से तुलना नहीं करता है और अपरिभाषित देता है।

@jmcclanahan @Dunos क्या आपको नहीं लगता कि फीचर मॉड्यूल के बजाय इसके इंजेक्टर संदर्भ को सौंपना (मुख्य ऐप मॉड्यूल के साथ इसके संदर्भ को पंजीकृत करना) यह बेहतर होगा यदि यह एक सेवा का खुलासा करता है जिसे FactoryResolver कहते हैं जो वास्तव में इसके लिए सही ढंग से हल की गई फैक्ट्री को वापस कर देगा। घटकों के रूप में यह अपने स्वयं के मॉड्यूल के इंजेक्टर के लिए सही संदर्भ होगा। इस तरह यह आपके घटकों के लिए सार्वजनिक एपीआई को उजागर करने जैसा होगा।

मैं कुछ ऐसा ही करने की कोशिश कर रहा हूं, लेकिन मेरा मॉड्यूल आलसी लोड नहीं है और मैं ऊपर वर्णित मुद्दे से टकरा रहा हूं। सिद्धांत रूप में, यह काम करना चाहिए, जब तक कि मुझे यहां कुछ स्पष्ट याद नहीं आ रहा है?

@ एच-अरोरा मैंने एक ही मुद्दे पर ध्यान दिया, COMP को देखकर। _factories में, लेकिन मुद्दा यह था कि मॉड्यूल में वास्तव में एक बिल्ड त्रुटि थी, जो दिखाई नहीं दे रही थी

# 17168 से मुकाबला करना (इस के डुप्लिकेट के रूप में बंद)

वर्तमान व्यवहार
यदि आपके पास एक सिंगलटन सेवा है जो गतिशील रूप से घटकों को बनाने के लिए ऐप के रूट इंजेक्टर द्वारा प्रदान किए गए कंपोनेंट फैक्ट्री रीसोल्वर का उपयोग करती है और आप आलसी मॉड्यूल में घोषित एंट्रीकंपोनेंट बनाना चाहते हैं, तो यह विफल हो जाएगा क्योंकि रूट इंजेक्टर इसके बारे में नहीं जानता है।

अपेक्षित् व्यवहार
यह वास्तव में अपेक्षित व्यवहार है क्योंकि रूट इंजेक्टर को एंट्रीकंपोनेंट्स के बारे में पता नहीं होगा जो बच्चे इंजेक्टर द्वारा ज्ञात हैं।

व्यवहार बदलने के लिए प्रेरणा/उपयोग का मामला क्या है?
प्रेरणा गतिशील घटकों को बनाने के लिए जटिलता का लाभ उठाने के लिए है, हालांकि कोणीय का मॉड्यूलर डिजाइन सही है।

कोणीय संस्करण: 2.4.9

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

बस बात कर रहे हैं:

पेज लोड हो गया है -> रूट इंजेक्टर बनाया गया है।
एक नेविगेशन जारी करता है जो एक LazyModule को सक्रिय करता है -> चाइल्ड इंजेक्टर बनाया जाता है।
RootInjector.entryComponents.append(childInjector.entryComponents)
कहीं और नेविगेशन जारी करता है -> LazyModule अब आवश्यक नहीं है, इस प्रकार नष्ट हो गया।
RootInjector.entryComponents.destroyLastAppendedEntryComponents ()
आशा है कि मैं कुछ अच्छा सुझा सकता हूँ।

मैंने अपनी कंपनियों के प्रोजेक्ट को तोड़ने और आलसी लोडिंग को लागू करने में कुछ दिन बिताए। यह अंत तक नहीं था कि मुझे एहसास हुआ कि हमारे मॉडल उनके संबंधित मॉड्यूल में प्रविष्टियां होने के कारण काम नहीं कर रहे थे। हम वापस लौट आए हैं और ठीक होने की प्रतीक्षा कर रहे हैं...

क्या यह कुछ ऐसा है जो शेड्यूल किया गया है या हमें इसका समाधान तलाशना चाहिए। जैसा कि लोग ऊपर कर रहे हैं।

@ravtakhar आप शायद वर्कअराउंड को देखना चाहते हैं क्योंकि यह बैकलॉग में है और इस समय प्राथमिकता नहीं दी गई है।

मैंने अपनी कंपनियों के प्रोजेक्ट को तोड़ने और आलसी लोडिंग को लागू करने में कुछ दिन बिताए। यह अंत तक नहीं था कि मुझे एहसास हुआ कि हमारे मॉडल उनके संबंधित मॉड्यूल में प्रविष्टियां होने के कारण काम नहीं कर रहे थे। हम वापस लौट आए हैं और ठीक होने की प्रतीक्षा कर रहे हैं...

क्या यह कुछ ऐसा है जो शेड्यूल किया गया है या हमें इसका समाधान तलाशना चाहिए। जैसा कि लोग ऊपर कर रहे हैं।

वही समस्या है

@tmirun ... यदि आप ऐसे आलसी मॉड्यूल प्रोग्रामेटिक रूप से लोड करते हैं ... आपके पास पूर्ण नियंत्रण है, ... इसका मतलब है कि आप अंततः मॉड्यूल संदर्भ प्राप्त कर सकते हैं और moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponentType) पर कॉल कर सकते हैं

ऊपर के रूप में एक ही समस्या थी, और एक स्टैंडअलोन मॉड्यूल बनाकर हल किया गया था, जिसमें ऐप मॉड्यूल में सभी एंट्रीकंपोनेंट्स की घोषणा और निर्यात किया गया था, और इसे निर्यात भी किया गया था, ताकि हर एक आलसी लोडेड मॉड्यूल इन घटकों को लोड कर सके।

एकमात्र अन्य व्यवहार्य समाधान जो मैंने पाया है वह entryComponent को होस्ट करने वाले मॉड्यूल के अनुसार एक कस्टम ComponentFactoryResolver प्रदान करके संवाद भी पैदा कर रहा था।

सावधान : याद रखें कि रूट में प्रदान किए गए सिंगलटन मॉड्यूल केवल मुख्य मॉड्यूल प्रविष्टि घटकों को देखेंगे, इसलिए मैंने पहले समाधान के साथ आने का फैसला किया है, अन्यथा आप अपने आवेदन के प्रत्येक सबमॉड्यूल के लिए एक डायलॉग स्पॉनर बनाने के बारे में सोच सकते हैं और, में उस सबमॉड्यूल में अंततः साझा किए गए मॉड्यूल शामिल होते हैं जिनमें अन्य entryComponents होते हैं, जो कि उक्त मॉड्यूल के ComponentFactoryResolver को सेवा प्रदान करते हैं।

... सामान्य समर्थित समाधान उपलब्ध होना चाहिए (कुछ नए एपीआई + आइवी में समर्थन) ... जेसन की प्रस्तुति के कारण http://www.youtube.com/watch?v=2wMQTxtpvoY&t=131m24s ... कोणीय 7.2 में। .. लेकिन मुझे यकीन नहीं है कि संस्करण 7.2 का सही उल्लेख किया गया था।

मेरे पास सीडीके ओवरले के साथ एक ही समस्या है, मेरे पास एक गैलरी प्लगइन है जो सीडीके ओवरले के शीर्ष पर बनाया गया है, लेकिन इस समस्या के कारण मुझे इसे रूट मॉड्यूल में आयात करना होगा।

बीटीडब्ल्यू, क्या मेरे मामले के लिए कोई कामकाज है?

@MurhafSousli ... योग्य, मुझे फिर से कहना है कि यह डिज़ाइन द्वारा है। बात को सौ बार समझाया गया था ... एक रूट इंजेक्टर है और कोई भी आलसी लोड मॉड्यूल एक स्तर गहरा है, इसलिए आप यह नहीं मान सकते कि आप इसके घटकों को रूट स्तर से छूने में सक्षम हैं। लेकिन जैसा कि कई बार कहा गया था कि आप उस मॉड्यूल को प्रोग्रामेटिक रूप से लोड कर सकते हैं ... तो आपको वह मॉड्यूल संदर्भ मिल जाएगा ... और आप उसके घटकों तक पहुंच सकते हैं।

मुझे भी सूची में जोड़ें . मेरे पास मोडल घटक है जहां मैं अपने घटकों को गतिशील रूप से लोड करता हूं और मैं उन सभी को ऐप में लोड नहीं करना चाहता जो खराब डिज़ाइन होंगे क्योंकि वे ऐप घटक का हिस्सा नहीं हैं। लेकिन मुझे यही करना है, मुझे लगता है कि यह सब पढ़ने के बाद।

@msarica ने आज मुझे बताया कि यदि आप एक ऐसी सेवा बनाते हैं जो आलसी रूप से भरी हुई है और इसने आपकी वैश्विक सेवा का विस्तार किया है जो पॉपअप खोलता है, तो पॉपअप खोलने के लिए आलसी भरी हुई सेवा का उपयोग करें, यह अपेक्षा के अनुरूप काम करेगा:

वैश्विक PopupService

@Injectable({ providedIn: 'root' })
export class PopupService {
  constructor(
    private injector: Injector,
    private overlay: Overlay,
  ) {}

  open<T = any>(component: ComponentType<T>) { ... }
}

विशिष्ट सेवा केवल MyFeatureModule . में आलसी रूप से भरी हुई है

@Injectable()
export class MyFeaturePopupService extends PopupService {}

एक घटक में उपयोग जो आलसी लोड MyFeatureModule . का हिस्सा है

@Component({ ... })
export class MyFeatureComponent {
  constructor(
    private myFeaturePopupService: MyFeaturePopupService,
  ) {}

  openPopup() {
    this.myFeaturePopupService.open(MyFeaturePopupComponent);
  }
}

आलसी लोडेड मॉड्यूल की उदाहरण परिभाषा

@NgModule({
  imports: [MyFeatureRoutingModule],
  declarations: [
    MyFeatureComponent,
    MyFeaturePopupComponent,
  ],
  entryComponents: [MyFeaturePopupComponent],
  providers: [MyFeaturePopupService],
})
export class MyFeatureModule {}

कोणीय 7 में परीक्षण किया गया।

नोट: हमारा कोड कोणीय सीडीके के Overlay का लाभ उठाता है, लेकिन अवधारणा समान है (इस धागे के अन्य भागों के अनुसार, यह Injector है जो चिंता का विषय है)।

... सामान्य समर्थित समाधान उपलब्ध होना चाहिए (कुछ नए एपीआई + आइवी में समर्थन) ... कोणीय 7.2 . में

... @ mlc-mlapis क्या आप विस्तार कर सकते हैं कि सामान्य समर्थित समाधान क्या होगा?

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

वह तरीका आज भी उपलब्ध है ... लेकिन कोणीय सीएलआई के साथ आपको हमेशा आवश्यक मार्गों को परिभाषित करने की आवश्यकता होती है ... भले ही आप उन्हें राउटर के माध्यम से कभी भी उपयोग न करें।

बहुत खूब। यह बहुत अप्रत्याशित था।

मैंने @angular/cdk पोर्टल्स और ओवरले के आधार पर अपना खुद का डायलॉग सिस्टम लागू किया: https://stackblitz.com/edit/cdk-dialog-example-p1। यह मुद्दा भी मिला।

@CWSpear द्वारा उल्लिखित वर्कअराउंड काम करता है: मुझे अपने फीचर मॉड्यूल में सेवा का विस्तार करना पड़ा और यह मेरे लिए काम कर गया। बहुत ही अजीब!

क्या इसके लिए एक और अधिक सुरुचिपूर्ण समाधान है?

क्या इसके लिए एक और अधिक सुरुचिपूर्ण समाधान है?

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

@NgModule({
  declarations: [LazyRootComponent, LazyEntryComponent],
  entryComponents:[LazyEntryComponent],
  providers:[LauncherWrapper],  //<---- reprovision here 
  imports: [
    CommonModule,
    LazyModRoutingModule
  ]
})
export class LazyModModule { }

@Injectable()
export class LauncherWrapper {
    constructor(private injector: Injector,  private launcher:ActualLaucherClass) {
    }

मेरी समस्या इसलिए हुई क्योंकि मैंने @Injectable({providedIn: 'root'}) उपयोग किया था। इसे @Injectable({providedIn: MyModule}) में बदलने से यह हल हो गया। मैं

यह समझ में आता है, क्योंकि सेवा को आलसी लोड किए गए मॉड्यूल प्रविष्टि घटकों तक पहुंच की आवश्यकता होती है। जब रूट में प्रदान किया जाता है, तो यह उन तक नहीं पहुंच सकता क्योंकि मॉड्यूल रूट इंजेक्टर से अस्थायी रूप से डिस्कनेक्ट हो गया है।

@jmcclanahan और @dirkluijk को बहुत धन्यवाद, मैं घंटों तक अपना सिर खुजला रहा था और आपके विवरण ने मेरे मामले का समाधान खोजने में मदद की।

मैं बस सोच रहा हूं कि ऐसा करने का सही तरीका क्या है।
इसकी जरूरत है @ कोणीय/सीडीके? क्यों ?

मुझे नहीं लगता कि कोई भी समाधान व्यवहार्य है यदि इसके बारे में जानने के लिए आपके द्वारा एकीकृत किए जा रहे कोड की आवश्यकता है, क्योंकि बहुत से तृतीय पक्ष कोड हैं जो आपकी विशेष वैकल्पिक रजिस्ट्री के बारे में जाने बिना ComponentFactoryResolver का उपयोग करते हैं।

इसे ध्यान में रखते हुए, मेरा "समाधान" यहां है: CoalescingComponentFactoryResolver । यह एक ऐसी सेवा है जिसे ऐप मॉड्यूल द्वारा प्रदान किया जाना चाहिए और इसके निर्माता में आरंभ किया जाना चाहिए, जैसे:

@NgModule({
 providers: [CoalescingComponentFactoryResolver]
})
class AppModule {
  constructor(coalescingResolver: CoalescingComponentFactoryResolver) {
    coalescingResolver.init();
  }
}

फिर, आलसी लोड किए गए मॉड्यूल को इसे इंजेक्ट करना चाहिए और इसके साथ अपने स्वयं के ComponentFactoryResolver उदाहरण पंजीकृत करना चाहिए। इस तरह:

@NgModule({})
export class LazyModule {
  constructor(
    coalescingResolver: CoalescingComponentFactoryResolver,
    localResolver: ComponentFactoryResolver
  ) {
    coalescingResolver.registerResolver(localResolver);
  }
}

जब यह किया जाता है, तो आलसी लोडेड मॉड्यूल में प्रवेश घटक गैर-आलसी भरी हुई सेवाओं से उपलब्ध होना चाहिए।

यह कैसे काम करता है: शुरू होने पर, यह रूट ऐप के ComponentFactoryResolver को इंजेक्ट करता है और बंदर अपने कार्यान्वयन को कॉल करने के लिए resolveComponentFactory विधि को पैच करता है। यह कार्यान्वयन पहले सभी पंजीकृत आलसी-मॉड्यूल रिज़ॉल्वर पर घटक कारखाने को हल करने का प्रयास करता है, फिर रूट ऐप रिज़ॉल्वर पर वापस आ जाता है (चक्रीय कॉल से बचने के लिए कुछ अतिरिक्त तर्क है, लेकिन यह सार है)।

तो, हाँ, एक सुंदर सकल हैक। लेकिन यह काम करता है, अभी, कोणीय 7 में। शायद यह किसी के काम का होगा।

@CWSpear के समाधान पर निर्माण, मुझे घटक के प्रदाता सरणी में बस अपनी मौजूदा पॉपअप सेवा जोड़कर यह काम मिल गया। तो मुझे एक अलग "फीचर-विशिष्ट" पॉपअप सेवा बनाने की आवश्यकता नहीं थी।

तो इस तरह:

@Component({
  ...
  providers: [PopupService]  //<---- generic PopupService
})
export class MedicationPortletComponent implements OnInit, OnDestroy {
...

वैकल्पिक रूप से, आप आलसी-लोडेड मॉड्यूल के NgModule के प्रदाता सरणी में पॉपअप सेवा भी जोड़ सकते हैं। जैसे:

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [PopupService] //<--- here's the PopupService!
})
export class SharedFeaturePatientModule {}

@jonrimmer सबसे अच्छा समाधान

@jonrimmer यह न्यूनतम घुसपैठ है और हमारे उपयोग के मामले में पूरी तरह से काम करता है। मेरी और मेरी टीम की ओर से बहुत-बहुत धन्यवाद :)

मैं बस उत्सुक हूं कि आलसी राउटर के मामले में यह आसानी से कैसे काम करता है, लेकिन जब मैं आलसी मार्ग को हटाता हूं और ngModuleFactoryLoader का उपयोग करके मॉड्यूल को मैन्युअल रूप से लोड करता हूं तो यह त्रुटि देता है।

//Ignore the syntax
CompA {
  openDialog() {//invoked on button click of this comp
    matDialog.open(FilterComponent);//works fine in case of lazy route but throws error when manually loaded
  }
}

ModuleA {//lazy module
  imports: [MatDialog, FilterModule],
  declaration: [CompA]
}

FilterModule {
  declaration: [FilterComponent],
  entryComponent: [FilterComponent]
}

FilterComponent { ...
}

@jmcclanahan @MartinJHItInstituttet @splincode

async showBar() {
    const module = await import("../bar/bar.module");
    const compiled = this._compiler.compileModuleAndAllComponentsSync(
      module.BarModule
    );
    compiled.ngModuleFactory.create(this._injector);

    let factory: any = compiled.componentFactories.find(
      componentFactory => componentFactory.selector === "app-dialog"
    );
    this.modal.show(factory.componentType);
  }

@ जिमीश यह जेआईटी मोड के लिए है। आपको AOT मोड के लिए import("../bar/bar.module.ngfactory") लोड करना होगा (जहां compileModuleAndAllComponentsSync उपलब्ध नहीं है)।

@mlc-mlapis
https://github.com/angular/angular/blob/master/aio/src/app/custom-elements/elements-loader.ts से अत्यधिक प्रेरित

https://github.com/Jimmysh/ng-lazy-component-load

यह एओटी जेआईटी का उपयोग कर सकता है। मेरे लिए सफलता।

import { InjectionToken, Type } from '@angular/core';
import { LoadChildrenCallback } from '@angular/router';

export const ELEMENT_MODULE_LOAD_CALLBACKS_AS_ROUTES = [
  {
    path: 'aio-foo',
    loadChildren: () => import('../foo/foo.module').then(mod => mod.FooModule)
  }
];

export interface WithCustomElementComponent {
  customElementComponent: Type<any>;
}

export const ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN = new InjectionToken<Map<string, LoadChildrenCallback>>(
  'aio/elements-map'
);

export const ELEMENT_MODULE_LOAD_CALLBACKS = new Map<string, LoadChildrenCallback>();
ELEMENT_MODULE_LOAD_CALLBACKS_AS_ROUTES.forEach(route => {
  ELEMENT_MODULE_LOAD_CALLBACKS.set(route.path, route.loadChildren);
});

`` `टाइपस्क्रिप्ट
आयात {कंपाइलर, इंजेक्ट, इंजेक्टेबल, NgModuleFactory, NgModuleRef, Type, ComponentFactory} '@angular/core' से;
'@angular/router' से { LoadChildrenCallback } आयात करें;

आयात { ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN } './lazy-component-registry' से;

@ इंजेक्शन योग्य ({
प्रदान किया गया: 'रूट'
})
निर्यात वर्ग LazyComponentLoader {
निजी मॉड्यूल लोड करने के लिए: नक्शा;
निजी मॉड्यूल लोड हो रहा है = नया नक्शा>();

निर्माता (
निजी मॉड्यूलरेफ: NgModuleRef,
@इंजेक्ट (ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN) तत्व मॉड्यूलपाथ: मानचित्र,
निजी संकलक: संकलक
) {
this.modulesToLoad = नया नक्शा (elementModulePaths);
}

लोड (पथ: स्ट्रिंग, चयनकर्ता ?: स्ट्रिंग): वादा:{
अगर (this.modulesLoading.has(path)) {
इसे वापस करें। मॉड्यूल लोड हो रहा है। प्राप्त करें (पथ);
}

if (this.modulesToLoad.has(path)) {
  const modulePathLoader = this.modulesToLoad.get(path);
  const loadedAndRegistered = (modulePathLoader() as Promise<NgModuleFactory<any> | Type<any>>)
    .then(elementModuleOrFactory => {
      if (elementModuleOrFactory instanceof NgModuleFactory) {
        return elementModuleOrFactory;
      } else {
        return this.compiler.compileModuleAsync(elementModuleOrFactory);
      }
    })
    .then(elementModuleFactory => {
      const elementModuleRef = elementModuleFactory.create(this.moduleRef.injector);
      const factories: Map<any, ComponentFactory<any>> = (elementModuleRef.componentFactoryResolver as any)
        ._factories;
      if (selector) {
        const find = Array.from(factories.keys()).find(type => {
          const factory = factories.get(type);
          return factory.selector === selector;
        });
        if (find) {
          return find;
        } else {
          return Promise.reject(new Error(`not found selector:${selector}`));
        }
      }
      this.modulesToLoad.delete(path);
      return;
    })
    .catch(err => {
      this.modulesLoading.delete(path);
      return Promise.reject(err);
    });
  this.modulesLoading.set(path, loadedAndRegistered);
  return loadedAndRegistered;
}
return Promise.resolve();

}
}

``` typescript
  async showFoo() {
    await this.lazyComponentLoader.load('aio-foo');
    this.modal.show(FooDialogComponent);
  }
  async showFoo2() {
      const aaa = await this.lazyComponentLoader.load('aio-foo', 'app-dialog');
    this.modal.show(aaa);
  }

@ जिमीश ... फिर सही। यह कंपाइलर का उपयोग केवल JIT मोड में कर रहा है।

constructor(private compiler: Compiler) {}
...
if (elementModuleOrFactory instanceof NgModuleFactory) {
   return elementModuleOrFactory;
} else {
   return this.compiler.compileModuleAsync(elementModuleOrFactory);
}

@ mlc-mlapis AOT NgModuleFactory होगा। आप https://github.com/Jimmysh/ng-lazy-component-load का परीक्षण कर सकते हैं

हे दोस्तों, टिप्पणियों की मदद से इस धागे को मैंने एक पैकेज बनाया है जो रूटिंग के माध्यम से मॉड्यूल के बाहर प्रवेश घटकों को लोड करने की कोशिश करने के लिए एक कामकाज है। कृपया इसे देखें और आशा करें कि यह मदद करता है।

रेपो लिंक: https://github.com/Jonathan002/route-master-example
डेमो यूआरएल: https://jonathan002.github.io/route-master-example/

FWIW, @CWSpear और @dirkluijk के समान ही, मैंने अपनी सेवा से providedIn: 'root' को हटा दिया (एक आलसी लोडेड मॉड्यूल में परिभाषित और entryComponent खोलने के लिए जिम्मेदार) और इसके बजाय सेवा निर्दिष्ट की मेरी आलसी मॉड्यूल परिभाषा के providers में। मेरा मानना ​​​​है कि इसका सबसे बड़ा/एकमात्र दोष यह है कि सेवा अब पेड़-हिलाने योग्य नहीं है।

providedIn: MyLazyModule का उपयोग करने से परिपत्र निर्भरता चेतावनियां हुईं।

@jonrimmer मैं आपको धन्यवाद दिए बिना धागा नहीं छोड़ सकता !! तुमने मेरा दिन बचाया।
मेरी टिप्पणी पढ़ने वाले सभी लोगों के लिए यह आपकी मदद कर सकता है ताकि आप अपना समय बर्बाद न करें यदि आप इस अद्भुत उत्तर को देखते हैं।

पुष्टि की यह अभी तक कोणीय 8.2.0 में हल नहीं हुआ है। चूंकि ओपी 2.5 साल पहले बनाया गया था, एंगुलर का परिदृश्य बहुत बदल गया था, और एंगुलर मटेरियल 2 एंगुलर कंपोनेंट्स बन गया था।

जैसा कि अन्य टिप्पणीकारों द्वारा इंगित किया गया है, कोणीय सामग्री DOM का उपयोग करती है, इसलिए एप्लिकेशन डेवलपर्स को MatDialog में एक एप्लिकेशन घटक लोड करते समय DOM का उपयोग करने की आवश्यकता नहीं होती है, भले ही एप्लिकेशन घटक को उप मॉड्यूल के एंट्रीकंपोनेंट्स में आलसी लोड के रूप में घोषित किया गया हो।

हालांकि, एंगुलर के एप्लिकेशन प्रोग्रामिंग दिशानिर्देशों के खिलाफ, व्यावसायिक अनुप्रयोग में समान DOM चीजें करना अजीब लग रहा है।

यह अच्छा होगा कि ओपी के फीचर अनुरोध को लागू किया जा सके ताकि ComponentFactoryResolver एक उप मॉड्यूल में आलसी लोड, एक तरफ या दूसरे में घोषित एक प्रविष्टि घटक "देख" सके। app.module में एक आलसी मॉड्यूल का प्रवेश घटक घोषित करना काम कर रहा है, लेकिन बदसूरत है।

ऊपर बताए अनुसार गंदे काम करने वाले समाधानों के अलावा: 1. डोम, 2. ऐप.मॉड्यूल में घटक की घोषणा करते हुए, मैं नीचे एक और समाधान प्रदान करूंगा, कम गंदा।

तीसरा समाधान, कम गंदा।

मेरे पास आलसी लोड किए गए एकाधिक मॉड्यूल द्वारा उपयोग की जाने वाली साझा सेवाएं हैं।

export interface DataComponent {
    data: any;
}

/**
 * Display an NG component in a dialog, and this dialog has not need to answer but close.
 */
@Injectable()
export class DataComponentDialogService {
    modalRef: MatDialogRef<DataComponentDialog>;

    constructor(private dialog: MatDialog) { }

    open(title: string, externalComponentType: Type<DataComponent>, componentData: any, autofocus = true): Observable<any> {
        const isSmallScreen = window.innerWidth < 640 || window.innerHeight < 640;
        this.modalRef = this.dialog.open(DataComponentDialog,
            {
                disableClose: true,
                minWidth: isSmallScreen ? '98vw' : undefined,
                autoFocus: autofocus,
                data: {
                    title: title,
                    externalComponentType: externalComponentType,
                    componentData: componentData,
                    isSmallScreen: isSmallScreen
                }
            });

        return this.modalRef.afterClosed();

    }

}

यह सेवा मॉड्यूल के प्रवेश घटकों को आलसी लोड नहीं देख सकती है। मेरे पास आलसी लोड किए गए कुछ मॉड्यूल में लागू कुछ प्रवेश घटक हैं। इसलिए मैंने प्रत्येक आलसी मॉड्यूल में प्रदान की जाने वाली इस सेवा की कक्षा प्राप्त की है:

import { DataComponentDialogService } from '../_ui_services/dataComponentDialog.component';

@Injectable()
export class LazyComponentDialogService extends DataComponentDialogService {
    constructor(dialog: MatDialog) {
        super(dialog);
    }
}

चूंकि LazyComponentDialogService आलसी प्रविष्टि घटक के साथ उसी आलसी मॉड्यूल में प्रदान किया जाता है, इसलिए यह घटक को देख सकता है।

आपके ऐप आर्किटेक्चर के आधार पर, आपको व्युत्पन्न वर्ग की आवश्यकता नहीं हो सकती है, लेकिन प्रत्येक मॉड्यूल में केवल DataComponentDialogService या समान रूप से प्रदान करें।

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

आपको बस एक अलग विजेट मॉड्यूल बनाने की ज़रूरत है जो आपके सभी गतिशील घटकों को घोषित करता है और उन्हें एंट्री कॉम्पोनेंट्स के रूप में भी शामिल करता है। फिर इस मॉड्यूल को AppModule से आयात करें। यह सुनिश्चित करेगा कि आपके प्रवेश घटक रूट इंजेक्टर के साथ पंजीकृत हैं।

यह घोल साफ है और आलसी इनकैप्सुलेशन को नहीं तोड़ता है।

@NgModule({
  declarations: [
    ModalComponent,
    ... more dynamic components ...
  ],
  entryComponents: [
     ModalComponent,
    ... more dynamic components ...
  ]
})
export class DynamicModule {

}

ऐप मॉड्यूल:

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      BrowserAnimationsModule,
      DynamicModule
   ],
   providers: [],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

@ पिक्सेलबिट्स-एमके जो सभी गतिशील घटकों (जैसे मोडल और इसी तरह) को उत्सुक लोड कर देगा, लेकिन यहां बिंदु उन्हें ऐप के प्रारंभिक लोड को धीमा नहीं करने के लिए आलसी लोड करने में सक्षम बनाता है (विशेष रूप से जैसे प्रोजेक्ट बढ़ता है ), ठीक उन घटकों की तरह जो उन्हें कॉल करते हैं।

मान लें कि आलसी लोड ComponentA गतिशील रूप से आलसी लोड गतिशील ComponentB $ को कॉल करता है। यदि ComponentA जानता है कि यह ComponentB को कॉल करेगा तो आप $#$ ComponentAModule ComponentBModule आयात कर सकते हैं। यह आदर्श मामला नहीं है, लेकिन मैं इसके साथ रह सकता हूं।

मुख्य समस्या तब उत्पन्न होती है (मेरी राय में) जब ComponentA यह नहीं जानता कि ComponentB लोड हो जाएगा । उदाहरण के लिए, यदि ComponentB एक मोडल है और ComponentA किसी सेवा में एक विधि showModal() को कॉल करता है, और सेवा ComponentB गतिशील रूप से पर्दे के पीछे लोड होती है, ComponentA उसे नहीं पता होगा।

अब मैं जो करता हूं वह ComponentB संदर्भ को विधि में एक पैरामीटर के रूप में शामिल करता है, जैसे showModal(ComponentB) , इस तरह से कि ComponentA अब जानता है कि ComponentB लोड किया जाएगा, लेकिन यह मेरी राय में बुरा है (विधि के लिए प्रत्येक कॉल को घटक संदर्भ पास करना होगा)।

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

मैंने (अभी तक) @jonrimmer सुझाव का परीक्षण नहीं किया है, लेकिन यह आशाजनक लगता है।

यह बहुत अच्छा होगा यदि ComponentA ComponentB के साथ स्वचालित रूप से आलसी लोड मॉड्यूल होगा यदि केवल ComponentA प्रदर्शित होता है:
ModuleA में घटक ComponentA1 , ComponentA2 है।
ComponentA1 html में संदर्भ ComponentB (मॉड्यूल में ModuleB ), लेकिन ComponentA2 नहीं है।
ModuleB केवल ComponentA1 प्रदर्शित होने पर स्वचालित रूप से आलसी लोड होगा, लेकिन यदि ComponentA2 प्रदर्शित नहीं होता है।

यह होम पेज पर डैशबोर्ड के परिदृश्य में पूरी तरह फिट होगा। डैशबोर्ड कई अलग-अलग मॉड्यूल से आता है, लेकिन यदि डैशबोर्ड शामिल नहीं है (मान लें कि उपयोगकर्ता सेटिंग्स के माध्यम से), तो उस मॉड्यूल को डाउनलोड करने की कोई आवश्यकता नहीं है।

@jonrimmer मुख्य ComponentFactoryResolver के रिजॉल्यूशनकंपोनेंट फैक्ट्री फ़ंक्शन को लपेटने और पहले पंजीकृत आलसी लोड मॉड्यूल को खोजने के लिए महान विचार।

यह प्रवेश घटकों के साथ काम करता है जो रूट में प्रदान की जाने वाली सेवाओं को इंजेक्ट करते हैं। लेकिन मैं ऐसी सेवा को इंजेक्ट नहीं कर सकता जो केवल आलसी लोड मॉड्यूल में प्रदान की जाती है। इस मामले में मुझे एक StaticInjectorError मिला। क्या आप कृपया इसकी जांच कर सकते हैं?

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

किसी भी दर पर, मैंने अपने मौजूदा कोणीय 8.2 प्रोजेक्ट में आइवी को सक्षम किया है और सभी उम्मीद के मुताबिक काम कर रहे हैं।

आलसी लोड मॉड्यूल में Overlay के उपयोग के लिए मेरा समाधान:
आपको फैक्ट्री रिज़ॉल्वर को ComponentPortal के कंस्ट्रक्टर को इस तरह पास करना होगा

@Injectable()
export class OverlayService {

  constructor(
    private overlay: Overlay,
    private componentFactoryResolver: ComponentFactoryResolver
  ) {
  }

  open<T>(component: ComponentType<T>) {
    const overlayRef = this.overlay.create();

    const filePreviewPortal = new ComponentPortal(component, null, null, this.componentFactoryResolver);

    overlayRef.attach(filePreviewPortal);
  }
}

लेकिन आपको आलसी लोडेड मॉड्यूल में OverlayService का भी भुगतान करना होगा। OverlayService को उस मॉड्यूल के ComponentFactoryResolver इंजेक्ट करने की आवश्यकता है जिसमें OverlayService प्रदान की जाती है

@NgModule({
  declarations: [
     SomeComponent,
  ],
  entryComponents: [
    SomeComponent,  // <-------- will be opened via this.overlayService.open(SomeComponent)
  ],
  providers: [
    OverlayService, // <--------
  ]
})
export class LazyLoadedModule {}

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

क्योंकि ओवरले सेवा का कोई सिग्नलटन नहीं होगा, यह जानना आसान नहीं होगा कि कितने मोडल डायलॉग खोले गए हैं।

बेशक, यह ऐप की आवश्यकताएं हैं लेकिन इस दृष्टिकोण से सावधान रहना है।

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

क्योंकि ओवरले सेवा का कोई सिग्नलटन नहीं होगा, यह जानना आसान नहीं होगा कि कितने मोडल डायलॉग खोले गए हैं।

बेशक, यह ऐप की आवश्यकताएं हैं लेकिन इस दृष्टिकोण से सावधान रहना है।

उदाहरण के लिए, मेरे मामले में मेरे पास ModalDialogModule प्रदान किया गया है OverlayService और जब मैं OverlayService.open(SomeComponent) पर कॉल करता हूं तो यह मेरे लिए मोडल विंडो टेम्पेट भी बनाता है, SomeComponent अंदर डालता है यह और कुछ डेटा संरचना को सहायक वेधशालाओं (करीब और सफलता की घटनाओं के लिए), घटक उदाहरण और मैनुअल close विधि के साथ वापस लौटाता है।
इसलिए, जब मुझे अपने LazyModule में मोडल का उपयोग करने की आवश्यकता होती है, तो मुझे OverlayService का उपयोग करने की क्षमता प्राप्त करने के लिए इसे केवल ModalDialogModule आयात करने की आवश्यकता होती है। मैंने इस दृष्टिकोण को सुविधाजनक पाया, क्योंकि आप हमेशा जानते हैं कि मोडल का उपयोग करने के लिए आपको ModalDialogModule आयात करना होगा, जैसे आप हमेशा जानते हैं कि प्रतिक्रियाशील रूपों का उपयोग करने के लिए आपको ReactiveFormModule आयात करना होगा

मुझे यह कोणीय 8.3.6 में काम कर रहा है। मेरे पास एंट्री कंपोनेंट्स (मैट डायलॉग्स) के साथ एक लाइब्रेरी मॉड्यूल है जो अगर मैं उन्हें लाइब्रेरी मॉड्यूल एंट्री कंपोनेंट्स में जोड़ता हूं तो लोड नहीं होगा। यह कहता है कि जब मैंने इसे खोलने का प्रयास किया तो कंसोल लॉग में MyCustomDialog के लिए घटक फ़ैक्टरी नहीं मिल सका।

समाधान लाइब्रेरी मॉड्यूल के NgModule वर्ग में एक स्थिर विधि बनाना है जो सभी मॉड्यूल के प्रवेश घटकों की एक सरणी देता है। फिर इस विधि को ऐप मॉड्यूल NgModule से कॉल करें।

@NgModule({
    declarations: [
        MyCustomDialogComponent
    ],
    imports: [
        CommonModule
    ],
    exports: [
        MyCustomDialogComponent
    ]
    // no need to add the dialog component to entryComponents here.
})
export class MyCustomModule {
    static getEntryComponents() {
        const entryComponents = [];
        entryComponents.push(MyCustomDialogComponent);
        return entryComponents;
    }
}

import {MyCustomModule} from 'my-custom-library'; // import library from node_modules

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        MyCustomModule
    ],
    providers: [],
    bootstrap: [AppComponent],
    entryComponents: [].concat(MyCustomModule.getEntryComponents())
})
export class AppModule {
}

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

@ asmith2306 आप स्प्रेड ऑपरेटर का उपयोग क्यों नहीं करते? यह बदसूरत लग रहा है

@ asmith2306 आप स्प्रेड ऑपरेटर का उपयोग क्यों नहीं करते? यह बदसूरत लग रहा है

क्योंकि यह इसके साथ काम नहीं करता है। इसके बारे में कहीं न कहीं एक बग है।

ऐसा लगता है कि यह --prod मोड के साथ काम नहीं करता है

भले ही इसने काम किया हो, यह वास्तविक समस्या का समाधान नहीं करता है। समस्या यह है कि अगर मैं एक एनजीएम मॉड्यूल के एंट्री कॉम्पोनेंट्स में एक घटक जोड़ता हूं, और वह मॉड्यूल मेरे ऐप में आलसी लोड मॉड्यूल में आयात किया जाता है, तो एंट्री कॉम्पोनेंट्स को स्वचालित रूप से ऐप्स एंट्री घटकों के साथ पंजीकृत होना चाहिए। कोई और काम की आवश्यकता नहीं होनी चाहिए। मैं आगे कहूंगा कि किसी भी NgModule के entryComponents में कोई भी घटक स्वचालित रूप से app मॉड्यूल के entryComponents में वाइंड हो जाएगा। फिलहाल ऐसा नहीं है। अगर ऐसा होता तो हम यहां नहीं होते।

@broweratcognitecdotcom विभिन्न इंजेक्शन स्तरों से संघर्षों और प्राथमिकताओं के बारे में क्या?

@mlc-mlapis आदेश मेरी राय में पहले आओ, पहले पाओ के आधार पर होना चाहिए।

@ mlc-mlapis क्या आपका मतलब है कि यदि विभिन्न घटकों का एक ही नाम है? पहला मैच या एक से अधिक मैच होने पर त्रुटि। मैं एक आवश्यकता के साथ रह सकता हूं कि प्रवेश घटक नाम अद्वितीय होना चाहिए।

@broweratcognitecdotcom हाय, हाँ। क्योंकि अगर हम सामान्य सिद्धांतों के बारे में बात कर रहे हैं तो सभी रूपों को कवर करना होगा।

@ mlc-mlapis मुझे लगता है कि कोणीय में सीमा जिसे कई लोग दूर करना चाहेंगे, वह यह है कि प्रवेश घटकों को केवल त्वरित किया जा सकता है और ऐप द्वारा डोम में रखा जा सकता है। ऐप को एक डायलॉग बॉक्स के बारे में जानने की आवश्यकता नहीं है जो एक मॉड्यूल जिसे मैं आलसी लोड मॉड्यूल में आयात करता हूं उपयोग करता है। प्रवेश घटकों की वर्तमान अवधारणा कोणीय के मॉड्यूलर पैटर्न को तोड़ती है।

आइवी एंट्री कॉम्पोनेंट्स के साथ AFAIK अब जरूरी नहीं होगा, है ना? चूंकि घटकों में स्थानीयता होगी, इसलिए उन्हें गतिशील रूप से आयात करना हमेशा काम करेगा?

@Airblader आप सही कह रहे हैं, हम जानते हैं। यह इतिहास की बस एक छोटी सी याद थी। मैं

उन लोगों के लिए जो अभी भी इस मुद्दे से जूझ रहे हैं, यहां वह समाधान है जो वास्तव में काम करता है: https://github.com/angular/angular/issues/14324#issuecomment -481898762

मैं इस मुद्दे के लिए एक पैकेज प्रकाशित करता हूं। जॉन्रिमर से कुछ कोड कॉपी।
ऐसा लगता है कि समस्या Angular 9 में मौजूद नहीं है। अगर आपको इसे अभी ठीक करने की आवश्यकता है। आप @aiao/lazy-component का उपयोग कर सकते हैं
नमूना कोड यहाँ
https://github.com/aiao-io/aiao/tree/master/integration/lazy-component

मेरा मानना ​​है कि यह कोणीय v9 चल आइवी लता में तय है। अगर किसी को अभी भी इसी तरह की समस्याओं का सामना करना पड़ता है, तो कृपया न्यूनतम पुनरुत्पादन परिदृश्य के साथ एक नया मुद्दा खोलें। Thnx!

निष्क्रियता के कारण यह समस्या अपने आप लॉक हो गई है।
यदि आप समान या संबंधित समस्या का सामना कर रहे हैं तो कृपया एक नया मुद्दा दर्ज करें।

हमारी स्वचालित वार्तालाप लॉकिंग नीति के बारे में और पढ़ें।

_{_यह क्रिया एक बॉट द्वारा स्वचालित रूप से की गई है।_}