कोणीय 2 आरसी 5. गतिशील रूप से लोड किए गए घटकों के लिए कोई घटक कारखाना नहीं मिला

Question

मैं घटक गतिशील घटक को आरसी 4 से आरसी 5 तक अपडेट करने की कोशिश कर रहा हूं क्योंकि घटक रेसोलवर को बहिष्कृत किया गया है। मैं निम्नलिखित

@Component({ 
    selector: 'component-dispatcher', 
    template: `<div #container></div>` // Define the template here because of its brevity 
}) 
export class ComponentDispatcherComponent implements OnInit, OnDestroy { 
    @Input() component:any; // Some dynamic component to render 
    @Input() options:any; // Component configuration, optional 
    @Input() data:any;  // Data to render within the component 

    // Inject the dynamic component onto the DOM 
    @ViewChild("container", {read: ViewContainerRef}) container:ViewContainerRef; 

    private componentReference:ComponentRef<any>; 

    constructor(private resolver:ComponentFactoryResolver) { 
    } 

    ngOnInit() { 
     // Create our component now we're initialised 
     let componentFactory = this.resolver.resolveComponentFactory(this.component); 
     this.componentReference = this.container.createComponent(componentFactory); 
     this.componentReference.instance.data = this.data; 
     this.componentReference.instance.options = this.options; 
    } 

    ngOnDestroy() { 
     // If we have a component, make sure we destroy it when we lose our owner 
     if (this.componentReference) { 
      this.componentReference.destroy(); 
     } 
    } 
} 

को लोडर अद्यतन और जब मैं अपने TextCellComponent या एप्लिकेशन मैं भीतर किसी अन्य घटक के साथ ऐसा कर गतिशील

@Component({ 
    selector: 'text-cell', 
    pipes: [IterableObjectPipe], 
    templateUrl: './text-cell.component.html', 
    styles: ['.fieldName { font-weight: bold; }'] 
}) 
export class TextCellComponent implements OnInit { 
    // Data to render within the component 
    @Input() data: any; 
    @Input() record: any; 

    // Configuration of what data to display 
    @Input() options: { 
     excludeFieldNames: boolean, 
     translation: string 
    }; 

    constructor() { 
    } 

    ngOnInit() { 
     setTimeout(() => { 
      //console.log('***************************** ngOnInit...textCell ***********************'); 
      this.options.translation = '' + (_.get(this.options, 'translation') || 'fields'); 
     }); 
    } 
} 

फिर भी डोम में निम्न घटक लोड करने का प्रयास किया है निम्न त्रुटि

ORIGINAL EXCEPTION: No component factory found for TextCellComponent 
ORIGINAL STACKTRACE: 
Error: No component factory found for TextCellComponent 
at NoComponentFactoryError.BaseException [as constructor]  
(webpack:///./~/@angular/core/src/facade/exceptions.js?:27:23) 
at new NoComponentFactoryError 

मैं

में चरण पूरे कर लिए मिलता है

लेकिन मुझे कुछ याद आ रहा है। मैंने बूटस्ट्रैपिंग में घटकों को जोड़ने की कोशिश की है और उन्हें बिना किसी किस्मत के वैश्विक स्तर पर परिभाषित किया है। कोई भी सुझाव महत्वपूर्ण है।

संपादित

जोड़ना मॉड्यूल परिभाषा

@NgModule({ 
    imports: [ 
     BrowserModule, 
     HttpModule, 
     FormsModule, 
     ReactiveFormsModule, 
     ...MATERIAL_MODULES 
    ], 
    declarations: [ 
     ...APPLICATION_PIPES, 
     ...APPLICATION_COMPONENTS, 
     ...APPLICATION_DIRECTIVES, 
     CygnusComponent, 
     // Component declarations 
     // TODO: refactor to appropriate modules 
     ... 
     ComponentDispatcherComponent, 
     TextCellComponent, 
     ... 
    ], 
    bootstrap: [ 
     ApplicationComponent 
    ], 
    providers: [ 
     ...APPLICATION_PROVIDERS, 
     AppStore 
    ] 
}) 
export class ApplicationComponent {} 

Answer 1

के बारे में लोड करने के लिए सभी घटकों "गतिशील" अपने मॉड्यूल के entryComponents अनुभाग में घोषित किया जाना चाहिए। दूसरे शब्दों में आप की तरह कुछ के साथ खत्म करना चाहिए:

@NgModule({ 
    imports: [BrowserModule, HttpModule, FormsModule, ReactiveFormsModule, ...MATERIAL_MODULES], 
    declarations: [...APPLICATION_PIPES, ...APPLICATION_COMPONENTS, ...APPLICATION_DIRECTIVES, CygnusComponent, 
     // Component declarations 
     // TODO: refactor to appropriate modules 
     ... 
     ComponentDispatcherComponent, 
     TextCellComponent, 
     ... 
    entryComponents: [TextCellComponent] 
    bootstrap: [ApplicationComponent], 
    providers: [...APPLICATION_PROVIDERS, AppStore] 
}) 
export class ApplicationComponent{ 

कृपया ध्यान दें कि आप में TextCellComponent दोनों declarationsऔरentryComponents अनुभाग सूचीबद्ध करने के लिए की जरूरत है।

Answer 2

आप अपने आयात पथ देखना चाहते हैं। मेरे मामले में, एक फ़ाइल आयात अपरकेस का उपयोग किया जाता है जबकि अन्य उपयोग किए गए लोअरकेस।

//file 1 
import { IRComponent } from "./components/IR/IR.component"; 
//file 2 
import { IRComponent } from "./components/ir/ir.component"; 

दे दूर Chrome नेटवर्क टैब में था, मैंने देखा है कि फ़ाइल में दो बार (एक बार प्रत्येक वर्तनी के लिए) लोड किया जा रहा था।

Answer 3

कभी-कभी जब आप इस समस्या का सामना करेंगे, भले ही आपने अपने EntryComponents के साथ-साथ घोषणाओं में घटक दिया हो।

उन स्थितियों में, तुम सिर्फ नीचे के रूप में अन्य सभी घटकों को ऊपर (यहाँ TextCellComponent) इस घटक नाम दर्ज करने के लिए है:

declarations: [ 
     TextCellComponent // Declared above 
     CygnusComponent, 
     ComponentDispatcherComponent, 
     ... 
    ] 

यह भी entryComponents में किया जाना चाहिए।

उम्मीद है कि मदद करता है।