尽管已在我的模块的 entryComponents 选项中声明了我的组件，但 Angular 如何找不到它的组件工厂？

Question

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)

Answer 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.

Answer 2

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

Answer 3

如果你的模块是延迟加载的并且你需要在延迟加载的模块之间共享服务，那么请你一个共享模块并在那里添加公共组件和服务，然后在应用模块中导入共享模块