Angular2 सामग्री संवाद में समस्याएँ हैं - क्या आपने इसे @ NgModule.entryComplds पर जोड़ा है?

Question

मैं डॉक्स के लिए https://material.angular.io/compenders/component/dialog पर अनुसरण करने का प्रयास कर रहा हूं, लेकिन मुझे समझ नहीं आ रहा है कि इसके नीचे का मुद्दा क्यों है?

मैंने अपने घटक पर नीचे जोड़ा:

@Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: './dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}

अपने मॉड्यूल में मैंने जोड़ा

import { HomeComponent,DialogResultExampleDialog } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog
  ],

// ...

फिर भी मुझे यह त्रुटि मिलती है…।

EXCEPTION: Error in ./HomeComponent class HomeComponent - inline template:53:0 caused by: No component factory found for DialogResultExampleDialog. Did you add it to @NgModule.entryComponents?
    ErrorHandler.handleError @ error_handler.js:50
    next @ application_ref.js:346
    schedulerFn @ async.js:91
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
    SafeSubscriber.next @ Subscriber.js:172
    Subscriber._next @ Subscriber.js:125
    Subscriber.next @ Subscriber.js:89
    Subject.next @ Subject.js:55
    EventEmitter.emit @ async.js:77
    NgZone.triggerError @ ng_zone.js:329
    onHandleError @ ng_zone.js:290
    ZoneDelegate.handleError @ zone.js:246
    Zone.runTask @ zone.js:154
    ZoneTask.invoke @ zone.js:345
    error_handler.js:52 ORIGINAL EXCEPTION: No component factory found for DialogResultExampleDialog. Did you add it to @NgModule.entryComponents?
    ErrorHandler.handleError @ error_handler.js:52
    next @ application_ref.js:346
    schedulerFn @ async.js:91
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
    SafeSubscriber.next @ Subscriber.js:172
    Subscriber._next @ Subscriber.js:125
    Subscriber.next @ Subscriber.js:89
    Subject.next @ Subject.js:55
    EventEmitter.emit @ async.js:77
    NgZone.triggerError @ ng_zone.js:329
    onHandleError @ ng_zone.js:290
    ZoneDelegate.handleError @ zone.js:246
    Zone.runTask @ zone.js:154
    ZoneTask.invoke @ zone.js:345

Answer 1

आपको entryComponentsअपने अंदर गतिशील रूप से बनाए गए घटकों को जोड़ना होगा@NgModule

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

नोट: आलसी लोड किए गए मॉड्यूल केentryComponents तहत कुछ मामलों में काम नहीं करेगा, क्योंकि वर्कअराउंड उन्हें आपके (रूट) में डाल देगाapp.module

Comments

धन्यवाद! इसके लिए हर जगह देख रहा था। मेरे विशेष मामले में, मुझे काम करने के लिए चीजों को पाने के लिए घटक को जोड़ने की भी आवश्यकता थीdeclarations

— जसदीप खालसा

हर बार जब मैं फेल होता हूं तो मुझे अपना सिर NgModule के आसपास मिलता है, ऐसा कुछ सामने आता है और आपको आश्चर्य होता है कि क्या इस ढांचे को इतना जटिल होना चाहिए। कम से कम त्रुटि संदेश मददगार हालांकि।

— डैडीवुडलैंड

क्या होगा यदि आप उन्हें पहले से ही वहाँ थे? यह क्यों कहेगा कि वे arent?

— सैम अलेक्जेंडर

@SamAlexander आपका प्रश्न वास्तव में व्यापक है जैसा कि आप सराहना करते हैं लेकिन एक जंगली अनुमान लगा रहे हैं; क्या आप उन्हें अपने आलसी लोडेड मॉड्यूल के अंदर उपयोग करते हैं?

— एको

आलसी लोड मॉड्यूल में संवाद 2.0.0-beta.2 के रूप में काम करते हैं

— charlie_pl

Answer 2

आप के entryComponentsतहत उपयोग करने की आवश्यकता है @NgModule।

यह गतिशील रूप से जोड़े गए घटकों के लिए है जिनका उपयोग करके जोड़ा जाता है ViewContainerRef.createComponent()। उन्हें प्रविष्टिकम्पाउटर्स में जोड़ना उन्हें तैयार करने और उनके लिए कारखाने बनाने के लिए ऑफ़लाइन टेम्पलेट कंपाइलर को बताता है।

मार्ग कॉन्फ़िगरेशन में पंजीकृत घटकों को स्वचालित रूप से और entryComponentsसाथ ही जोड़ा जाता है क्योंकि DOM में रूट किए गए घटकों को जोड़ने के लिए router-outletभी उपयोग किया ViewContainerRef.createComponent()जाता है।

तो आपका कोड जैसा होगा

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

Comments

ऊग ... मेरे पास दो संवाद थे जो अन्यथा समान थे लेकिन एक मेरे पास एक परीक्षण मार्ग था जो इसे इंगित करता था। मैंने उस परीक्षा मार्ग को हटा दिया और पर्याप्त रूप से सुनिश्चित किया ... रूटिंग मुझे "मदद" कर रहा था। > :(

— टॉम

@ सुनील गर्ग मेरे पास एक और मुद्दा है। मेरा डायलॉग शो लेकिन यह 1sec के भीतर स्वतः बंद हो जाता है। क्रिप्या मेरि सहायता करे।

— प्रियंका सी

Answer 3

यह इसलिए हो रहा है क्योंकि यह एक गतिशील घटक है और आपने इसे entryComponentsनीचे नहीं जोड़ा है @NgModule।

बस इसे वहाँ जोड़ें:

@NgModule({
  /* ----------------- */
  entryComponents: [ DialogResultExampleDialog ] // <---- Add it here

देखिए कि कोणीय टीम किस तरह से बात करती है entryComponents:

entryComponents?: Array<Type<any>|any[]>

उन घटकों की सूची निर्दिष्ट करता है जिन्हें इस मॉड्यूल के परिभाषित होने पर संकलित किया जाना चाहिए। यहां सूचीबद्ध प्रत्येक घटक के लिए, कोणीय एक ComponentFactory बनाकर ComponentFactoryResolver में संग्रहीत करेगा।

इसके अलावा, यह तरीकों की सूची में @NgModuleशामिल हैentryComponents ...

जैसा कि आप देख सकते हैं, वे सभी वैकल्पिक हैं (प्रश्न चिह्न देखें), जिसमें entryComponentsघटकों की एक सरणी को स्वीकार करना शामिल है :

@NgModule({ 
  providers?: Provider[]
  declarations?: Array<Type<any>|any[]>
  imports?: Array<Type<any>|ModuleWithProviders|any[]>
  exports?: Array<Type<any>|any[]>
  entryComponents?: Array<Type<any>|any[]>
  bootstrap?: Array<Type<any>|any[]>
  schemas?: Array<SchemaMetadata|any[]>
  id?: string
})

Comments

मेरे साथ एक ही मामला और काम नहीं करेगा: यह दिखाता है: त्रुटि: DialogConfirmComponent के लिए कोई घटक कारखाना नहीं मिला। क्या आपने इसे @ NgModule.entryCompords में जोड़ा था? कोई उपाय?

— नाम ले

आप इसे ngAfterViewInit में (से @ कोणीय / कोर) डालने की आवश्यकता

— पेट्रिक Panek

Answer 4

यदि आप MatDialogकिसी सेवा के अंदर उपयोग करने का प्रयास कर रहे हैं - चलो इसे कॉल करते हैं 'PopupService'और उस सेवा को एक मॉड्यूल में परिभाषित किया जाता है:

@Injectable({ providedIn: 'root' })

तब यह काम नहीं कर सकता है। मैं आलसी लोडिंग का उपयोग कर रहा हूं, लेकिन यह सुनिश्चित नहीं है कि यह प्रासंगिक है या नहीं।

आपको करना होगा:

• PopupServiceअपने डायलॉग को खोलने वाले कंपोनेंट को सीधे प्रदान करें - उपयोग करना [ provide: PopupService ]। यह MatDialogघटक में आवृत्ति (DI के साथ) का उपयोग करने की अनुमति देता है । मुझे लगता है कि घटक बुला रहे हैंopen को इस उदाहरण में संवाद घटक के समान मॉड्यूल में होना चाहिए।
• संवाद घटक को अपने app.module पर ले जाएं (जैसा कि कुछ अन्य उत्तरों ने कहा है)
• matDialogजब आप अपनी सेवा को कॉल करते हैं तो एक संदर्भ दें ।

मेरे उलझे हुए जवाब को माफ करें, यह वह बिंदु providedIn: 'root'है जो चीजों को तोड़ रहा है क्योंकि मैटडियलॉग को एक घटक से पिगी-बैक करने की आवश्यकता है।

Comments

ऐसा होता है! वास्तव में प्रविष्टि त्रुटि, गलत त्रुटि संदेश देखने के बजाय अपनी सेवा जोड़ें!

— Tibi

मेरे लिए वही हो रहा है, लेकिन मैं इस जवाब से समझ नहीं सका, कौन सा समाधान है? या सभी 3 आवश्यक हैं?

— कोडिंग_डॉट

मेरा एक ही मुद्दा था

— MJVM

Answer 5

आलसी लोडिंग के मामले में, आपको बस आलसी लोडेड मॉड्यूल में MatDialogModule आयात करना होगा । तब यह मॉड्यूल अपने स्वयं के आयातित MatDialogModule के साथ प्रविष्टि घटक को प्रस्तुत करने में सक्षम होगा :

@NgModule({
  imports:[
    MatDialogModule
  ],
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

Answer 6

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

इस कारण से, मैंने PrimeNG डायलॉग का उपयोग करते हुए समाप्त किया , जिसे मैंने उपयोग करने के लिए बहुत सरल पाया:

m-dialog.component.html:

<p-dialog header="Title">
  Content
</p-dialog>

m-dialog.component.ts:

@Component({
  selector: 'm-dialog',
  templateUrl: 'm-dialog.component.html',
  styleUrls: ['./m-dialog.component.css']
})
export class MDialogComponent {
  // dialog logic here
}

m-dialog.module.ts:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { DialogModule } from "primeng/primeng";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    DialogModule
  ], 
  exports: [
    MDialogComponent,
  ], 
  declarations: [
    MDialogComponent
  ]
})
export class MDialogModule {}

बस अपने घटक के HTML में अपना संवाद जोड़ें:

<m-dialog [isVisible]="true"> </m-dialog>

PrimeNG प्राइमफेस प्रलेखन आसान और बहुत सटीक है।

Comments

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

— दिक्ब्रस

Answer 7

आपको इसे डॉक्सentryComponents में निर्दिष्ट करना चाहिए ।

@NgModule({
  imports: [
    // ...
  ],
  entryComponents: [
    DialogInvokingComponent, 
    DialogResultExampleDialog
  ],
  declarations: [
    DialogInvokingComponent,   
    DialogResultExampleDialog
  ],
  // ...
})

यहां एक एप्लिकेशन मॉड्यूल फ़ाइल के लिए एक पूर्ण उदाहरण दिया गया है , जिसमें एक संवाद परिभाषित किया गया है entryComponents।

Answer 8

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

Answer 9

मेरे मामले में, मैंने अपने घटकों को घोषणाओं और प्रविष्टिकंपोजर्स में जोड़ा और उन्हें समान त्रुटियां मिलीं। मुझे आयात में MatDialogModule जोड़ने की भी आवश्यकता थी।

Answer 10

अगर किसी को यहां सेवाओं से डायलॉग बुलाना है तो समस्या को कैसे हल किया जाए। मैं उपरोक्त कुछ जवाबों से सहमत हूं, मेरा जवाब सेवाओं में डायलॉग बुलाने के लिए है अगर किसी को मुद्दों का सामना करना पड़ सकता है।

उदाहरण के लिए एक सेवा बनाएँ संवाद सेवा फिर सेवाओं के अंदर अपने संवाद कार्य को आगे बढ़ाएँ और अपने संवाद को उस घटक में जोड़ें जिसे आप नीचे दिए गए कोड की तरह कहते हैं:

 @Component({
  selector: "app-newsfeed",
  templateUrl: "./abc.component.html",
  styleUrls: ["./abc.component.css",],
  providers:[DialogService]
})

अन्यथा आपको त्रुटि मिलती है