typescriptdialogangular6nebularngx-admin

How to pass angular component to Nebular dialog service


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?


Solution

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