I'm trying to create a web dialog on Agnular6 using Nebular
components. There are two ways to do this, the first one is to pass <ng-template>
reference, like:
openAddDialog = (dialogTemplate: TemplateRef<any>) => {
this.dialogServiceRef = this.dialogService.open(dialogTemplate);
}
and it's working well. But what I need is to pass a component as a parameter like:
dialogService.open(MyComponent);
I have this structure in my app:
|_ pages
| |_ pages.module.ts
| |_ patient
| |_ patient.module.ts
| |_ patient.component.ts
| |_ patient.component.html
|
|_ shared
|_ shared.module.ts
|_ components
| |_ search-bar.component.ts
| |_ search-bar.component.html
|
|_ modal-form
|_ modal-form.component.ts
|_ modal-from.component.html
I've added the ModalFormComponent
to the declarations
, exports
, and entryComponents
in the shared module. Also, I imported it in the SearchBar component and run this function on click on a button in searchBar:
openAddDialog = () => {
this.dialogServiceRef = this.dialogService.open(ModalFormComponent);
}
and I got this error in the browser console:
ERROR Error: No component factory found for ModalFormComponent. Did you add it to @NgModule.entryComponents?
at noComponentFactoryError (core.js:19453)
at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:19504)
at NbPortalOutletDirective.attachComponentPortal (portal.js:506)
at NbDialogContainerComponent.attachComponentPortal (index.js:17128)
at NbDialogService.createContent (index.js:17336)
at NbDialogService.open (index.js:17295)
at SearchBarComponent.openAddDialog (search-bar.component.ts:46)
at Object.eval [as handleEvent] (SearchBarComponent.html:11)
at handleEvent (core.js:34777)
at callWithDebugContext (core.js:36395)
Any thoughts on what is the problem and how may I fix it?
Try to put the component in the entryComponents field in the module (be it main module or a child module, depending on your situation).
import {NgModule} from '@angular/core';
import {
//...
NbDialogModule
//...
} from '@nebular/theme';
@NgModule({
declarations: [
//...,
ModalFormComponent,
//...
],
entryComponents: [
//...
ModalFormComponent,
//...
],
imports: [
//...
// NbDialogModule.forChild() or NbDialogModule.forRoot()
//...
],
providers: [
//...
],
})
export class ExampleModule{
}
This should solve your error.