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




angular-material (6)

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

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

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

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

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

मैं डॉक्स का अनुसरण करने की कोशिश कर रहा हूं https://material.angular.io/components/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

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

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

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


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

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

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

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

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

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

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

जैसा कि आप देख सकते हैं, उनमें से सभी वैकल्पिक हैं (प्रश्न चिह्न को देखें), जिसमें 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
})

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


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


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

इस कारण से, मैंने 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 प्राइमफेस प्रलेखन आसान और बहुत सटीक है।