entryComponents is not working in Angular 6

Question

I have a problem when using ng-bootstrap modal in angular 6.

First, I have 2 module:

AppModule and ComponentModule

Here is ComponentModule:

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ComponentRoutingModule,
    BsDropdownModule.forRoot(),
    TabsModule,
    PaginationModule.forRoot(),
    PopoverModule.forRoot(),
    ProgressbarModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot(),
    NgMultiSelectDropDownModule.forRoot(),
  ],
  declarations: [
   CategoryComponent,
   CourseComponent,
   ModalComponent,
   CategoryModalComponent,
  ],
  entryComponents: [CategoryModalComponent],
})
export class ComponentModule { }

ComponentModule is where I put component that will be displayed after I logged in.

In a ComponentModule, I have a Course component:

@Component({
  selector: 'app-course',
  template: '<app-modal></app-modal>',
  styleUrls: ['./course.component.scss']
})
export class CourseComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Here is ModalComponent in the same module:

@Component({
  selector: 'app-modal',
  template: '<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(CategoryModalComponent);
    modalRef.componentInstance.name = 'World';
  }

  ngOnInit() {
  }

}

and

@Component({
  selector: 'app-category-modal',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, {{name}}!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>
  `,
  styleUrls: ['./category-modal.component.scss']
})
export class CategoryModalComponent implements OnInit {

  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}

  ngOnInit() {
  }

}

I expect that when I click button in ModalComponent, I will show a modal that its content is in CategoryModalComponent. But it showed me an error:

ModalComponent.html:4 ERROR Error: No component factory found for CategoryModalComponent. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (core.js:3256)
    at CodegenComponentFactoryResolver.push../node_modules/@angular/core/fesm5/core.js.CodegenComponentFactoryResolver.resolveComponentFactory (core.js:3291)
    at NgbModalStack.push../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js.NgbModalStack._createFromComponent (ng-bootstrap.js:7643)
    at NgbModalStack.push../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js.NgbModalStack._getContentRef (ng-bootstrap.js:7581)
    at NgbModalStack.push../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js.NgbModalStack.open (ng-bootstrap.js:7444)

According the error, I added it in ComponentModule but it's not working.

Could you please give any advice to solve it?

Answer 1

You should add 'CategoryModalComponent' as the declarations & entryComponent in Module.

https://stackblitz.com/angular/pxgjqrndxkoq

Answer 2

Add NgbModalModule or NgbModule to your ComponentModule.

There is no ngb modules in your Components module.

nb: Tried and worked in your case.

 import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
 @NgModule({
   imports: [
    ...
    NgbModalModule
   ],
   ...
 })
 export class ComponentModule { }