CODEWITHSUNDEEP
javascriptangulartypescriptdependency-injection
Thomas Perez
Thomas Perez

Reputation: 171

How Angular can not find the component factory for my component despite it has been declared in the entryComponents option of my Module?

I want to show a component in a ngx-bootstrap's modal but how can I dynamically create it ?

I have tried to declare the component in the entryComponents option of the RegMktRiskHomeModule but it doesn't work either. The only way I found for now is to declare the ScenariosGraphComponent in the AppModule just like I've done it in RegMktRiskCommonModule.

Could that be related to the fact that RegMktRiskHomeModule is imported in HomeModule and that this HomeModule is lazy-loaded by the application ?

Here is my code (roughly):

reg-mkt-risk-common.module.ts:

@NgModule({
    declarations: [
        ScenariosGraphComponent
    ],
    entryComponents: [
        ScenariosGraphComponent
    ],
    exports: [
        ScenariosGraphComponent
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class RegMktRiskCommonModule { }

reg-mkt-risk-home.module.ts:

@NgModule({
    declarations: [
        RegulatoryMarketRiskHomeComponent,
        OverviewGridComponent // <-- component who actually show ScenariosGraphComponent in a modal
    ],
    exports: [
        RegulatoryMarketRiskHomeComponent
    ],
    imports: [
        // ...,
        RegMktRiskCommonModule
    ],
    providers: [
        // ...
    ]
})
export class RegMktRiskHomeModule { }

Here is the actual error message:

ERROR Error: No component factory found for ScenariosGraphComponent. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (core.js:9659)
    at CodegenComponentFactoryResolver.push../node_modules/@angular/core/fesm5/core.js.CodegenComponentFactoryResolver.resolveComponentFactory (core.js:9697)
    at ComponentLoader.push../node_modules/ngx-bootstrap/component-loader/fesm5/ngx-bootstrap-component-loader.js.ComponentLoader._getContentRef (ngx-bootstrap-component-loader.js:411)
    at ComponentLoader.push../node_modules/ngx-bootstrap/component-loader/fesm5/ngx-bootstrap-component-loader.js.ComponentLoader.show (ngx-bootstrap-component-loader.js:152)
    at BsModalService.push../node_modules/ngx-bootstrap/modal/fesm5/ngx-bootstrap-modal.js.BsModalService._showModal (ngx-bootstrap-modal.js:927)
    at BsModalService.push../node_modules/ngx-bootstrap/modal/fesm5/ngx-bootstrap-modal.js.BsModalService.show (ngx-bootstrap-modal.js:853)
    at Object.action (overview-grid.options.ts:48)
    at MenuItemComponent.push../node_modules/ag-grid-enterprise/dist/lib/menu/menuItemComponent.js.MenuItemComponent.onOptionSelected (menuItemComponent.js:102)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:16147)

Upvotes: 1

Views: 604

Answers (3)

vishnu s pillai
vishnu s pillai

Reputation: 101

If your Module is lazy loaded and you need to share services among lazy loaded modules, So please you a shared module and add common components and services there and then import shared module in app module

Upvotes: 0

Arie
Arie

Reputation: 316

Maybe you forgot to import the MatDialogModule in the module of the component that opens the dialog. The error that Angular generates in that case can be misleading.

Upvotes: 1

Tony
Tony

Reputation: 20162

You need to change your code like this

@NgModule({
    declarations: [
        RegulatoryMarketRiskHomeComponent,
        OverviewGridComponent,
        ScenariosGraphComponent
    ],
    entryComponents: [
        ScenariosGraphComponent
    ],
    exports: [
        RegulatoryMarketRiskHomeComponent
    ],
    imports: [
        // ...,
        RegMktRiskCommonModule
    ],
    providers: [
        // ...
    ]
})
export class RegMktRiskHomeModule { }

So you can remove ScenariosGraphComponent in your RegMktRiskCommonModule

Upvotes: 0

Related Questions