1
votes

Comment Angular ne peut pas trouver la fabrique de composants pour mon composant malgré qu'elle ait été déclarée dans l'option entryComponents de mon module?

Je souhaite afficher un composant dans un ngx-bootstrap's modal mais comment puis-je le créer dynamiquement?

J'ai essayé de déclarer le composant dans l'option entryComponents du RegMktRiskHomeModule mais cela ne fonctionne pas non plus. Le seul moyen que j'ai trouvé pour l'instant est de déclarer le ScenariosGraphComponent dans le AppModule comme je l'ai fait dans RegMktRiskCommonModule .

Cela pourrait-il être lié au fait que RegMktRiskHomeModule est importé dans HomeModule et que ce HomeModule est chargé paresseusement par l'application?

Voici mon code (en gros):

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

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)


3 commentaires

Si je ne me trompe pas, entryComponent doit être répertorié dans le module où il doit être utilisé. Dans votre cas, il doit être répertorié dans le module d'accueil mais pas (nécessairement) dans le module commun où il est défini.


@ Scorpioo590 tu veux dire comme dans la réponse de Tony? J'ai déjà essayé ça et ça ne marche pas non plus :-(


J'ai édité ma question, mon pb a quelque chose à voir avec le fait que RegMktRiskHomeModule est importé dans le HomeModule chargé paresseusement.


3 Réponses :


0
votes

Vous devez changer votre code comme ceci

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

Vous pouvez donc supprimer ScenariosGraphComponent dans votre RegMktRiskCommonModule


2 commentaires

J'ai déjà essayé ça et ça ne marche pas non plus. J'ai toujours la même erreur. Au fait, la raison pour laquelle j'ai créé le module RegMktRiskCommonModule est que ScenariosGraphComponent sera utilisé dans différentes fonctionnalités de mon application (et probablement d'autres composants).


J'ai édité ma question, mon pb a quelque chose à voir avec le fait que RegMktRiskHomeModule est importé dans le HomeModule chargé paresseusement.



1
votes

Peut-être avez-vous oublié d'importer le MatDialogModule dans le module du composant qui ouvre la boîte de dialogue. L'erreur générée par Angular dans ce cas peut être trompeuse.


0 commentaires

0
votes

Si votre module est chargé paresseusement et que vous avez besoin de partager des services entre des modules chargés paresseusement, veuillez donc vous un module partagé et ajoutez-y des composants et des services communs, puis importez le module partagé dans le module d'application


0 commentaires