component as ngBootstrap modal content in angular 8

Question

I'm trying to make a modal with component as content and I get this error:

No component factory found for AddLessonComponent. Did you add it to @NgModule.entryComponents?

The caller component html:

<button class="btn btn-primary dark" (click)="addLessons()">הוסף שיעורים</button>

The caller component ts:

import { Component, OnInit, Input, Output, EventEmitter, NgModule } from '@angular/core';
import { NgbModalConfig, NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { AddLessonComponent } from '../add-lesson/add-lesson.component';

@Component({
  selector: 'app-speciality',
  templateUrl: './speciality.component.html',
  styleUrls: ['./speciality.component.scss'],
  providers: [NgbModalConfig, NgbModal]
})
export class SpecialityComponent implements OnInit {
  constructor(private modalService: NgbModal)
  ngOnInit() {}
  addLessons() {
    const modalRe = this.modalService.open(AddLessonComponent);
    modalRe.componentInstance.name = 'World';
  }
}

The content component html:

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

The content component ts:

import { Component, OnInit, Inject, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-add-lesson',
  templateUrl: './add-lesson.component.html',
  styleUrls: ['./add-lesson.component.scss']
})
export class AddLessonComponent implements OnInit {

    @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
    ngOnInit() {
    }
}

The appModule:

import { NgModule, Component } from '@angular/core';
import { NgbModule,NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
import { SpecialityComponent } from './COMPONENTS/speciality/speciality.component';
import { AddLessonComponent } from './components/add-lesson/add-lesson.component';


@NgModule({
  declarations: [
   SpecialityComponent,
   AddLessonComponent,
  ],
  imports: [
 NgbModule,NgbModalModule
  ],
  entryComponents: [AddLessonComponent]
})
export class AppModule { }

Answer 1

Please check below link:

https://stackblitz.com/edit/angular-nd5ihf

1. As far as I see the error which you have shown is because of when you not write your content component inside entry component but you have done it

2. If you have only two components and this is your structure than some other points are missing in AppModule like

   bootstrap: [ SpecialityComponent ],

importing of BrowserModule

I just updated AppModule and your code is working perfectly.