Angular 8 ng-bootstrap modal not loading CSS classes

Question

I npm install @ng-bootstrap/ng-bootstrap@5.3.1 in an Angular 8 project, When I open the modal using the modal service, the first try the modal will take time to open. the second time the modal does not open. Looking at the devtool, the modal is open just doesn't have CSS classes set. I did import bootstrap to the styles.scss file @import "~bootstrap/scss/bootstrap.scss"; I tried using JavaScript to inject the CSS classes after open the model but didn't make any difference.

   @ViewChild('modalContent', { static: false }) private modalContent: TemplateRef<any>;
   // .....some code here....

    public openNgbModal(): NgbModalRef {
      return this.modalService.open(this.modalContent, {
        size: 'lg',
        backdrop: 'static',
        keyboard: false,
        windowClass : 'modal-content'
      });
    }

See below:

The correct html should be the below:

Answer 1

Try calling the modalService.open() without any options and see if it make any difference.

this.modalService.open(this.modalContent)

Answer 2

Im not proud of the answer but it did get the job done. Used javascript to add the classes manual.

   public openNgbModal(): NgbModalRef {
      return this.modalService.open(this.modalContent, {
        size: 'lg',
        backdrop: 'static',
        keyboard: false,
        windowClass : 'modal-content'
      });

      const modalBackdrop = document.getElementsByTagName('ngb-modal-backdrop');
      // check the class if exists
      modalBackdrop[0].className = 'modal-backdrop fade show';
      
      const modalWindow = document.getElementsByTagName('ngb-modal-window');
      // check the class if exists
      modalWindow[0].className = 'modal fade show d-block';
      modalWindow[0].setAttribute('aria-modal', 'true');
      modalWindow[0].children[0].className = 'modal-dialog modal-s';
    }