1

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)
Thomas Perez
  • 129
  • 2
  • 13
  • If I'm not mistaken the entryComponent has to be listed in the module where it should be used. In your case it has to be listed in the home module but not (neccesarily) in the common module where it is defined. – jBuchholz Aug 13 '19 at 10:41
  • @Scorpioo590 you mean like in Tony's answer ? I already tried that and it doesn't work either :-( – Thomas Perez Aug 13 '19 at 11:42
  • I edited my question, has my pb anything to do with the fact that ```RegMktRiskHomeModule``` is imported in the lazy-loaded ```HomeModule```. – Thomas Perez Aug 13 '19 at 11:58

3 Answers3

1

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.

Arie
  • 316
  • 1
  • 4
0

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

Tony Ngo
  • 19,166
  • 4
  • 38
  • 60
  • I already tried that and it doesn't work either. I still have the same error. By the way, the reason I created the module ```RegMktRiskCommonModule``` is because ```ScenariosGraphComponent``` will be used in different features on my application (and probably other components). – Thomas Perez Aug 13 '19 at 11:38
  • I edited my question, has my pb anything to do with the fact that ```RegMktRiskHomeModule``` is imported in the lazy-loaded ```HomeModule```. – Thomas Perez Aug 13 '19 at 11:58
0

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

vishnu s pillai
  • 101
  • 4