angular cli показывает ошибку. Свойство «open» не существует для типа «NgbModule» при использовании NgbModule

я пытаюсь открыть модальный компонент из компонента и передать компонент в модальный, используя метод «.open» в соответствии с документацией @ng-bootstrap, но я получаю сообщение об ошибке в angular cli, что .open не является методом

Я также добавил «NgbModule.forRoot()» в импорт в NgbModule и выполнил все шаги в соответствии с документацией, но все еще получаю сообщение об ошибке.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Angular2SocialLoginModule } from "angular2-social-login";
import { AppComponent } from './app.component';
import { AppRoutingModule } from "./app-routing.module";
import { LoginModule } from "./login/login.module";
import { MaterialModule } from '@angular/material';
import { ModalDirective } from 'ngx-bootstrap/modal';
import { ModalModule } from 'ngx-bootstrap/modal';
import { ConfigService } from "./config-service";
import { ErrorMessageService } from "./share/error-messages.service"
import { MdTooltipModule } from '@angular/material';

import { CustomProfileComponent } from './custom-profile/custom-profile.component';
import { ReactiveFormsModule } from '@angular/forms';

import { HttpModule, JsonpModule }    from '@angular/http';
import { S3UploadService } from "./custom-profile/fileupload.component.service";
import {HomeModule } from "./Home/home-component-module";
import { ProfileComponent } from './profile/profile.component';

import {ConfirmPopupService} from "./confirm-popup.service";


import 'hammerjs';

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';    

@NgModule({
  declarations: [
    AppComponent,
    CustomProfileComponent],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    JsonpModule,
    FormsModule,
    MaterialModule,
    AppRoutingModule,
    LoginModule,
    MdTooltipModule,
    Angular2SocialLoginModule,
    HomeModule,
    NgbModule.forRoot()

  ],
  providers: [ConfigService, ErrorMessageService,S3UploadService],
  bootstrap: [AppComponent]
})
export class AppModule { }
Angular2SocialLoginModule.loadProvidersScripts(providers);

вот мой модальный компонент, который я хочу передать методу "open"

confirmation.component.ts

import { Component, Input } from "@angular/core";
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Observable, Subject, ReplaySubject } from "rxjs";


@Component({
    selector: 'ngbd-modal-confirm',
    template: `
        <div class="modal-header">
            <h4 class="modal-title">Confirm {{name}}</h4>

            <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')" style="float:right">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <p>Are you sure you want to confirm this {{name}}!</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" (click)="yesClick()">YES</button>
            <button type="button" class="btn btn-secondary" (click)="noClick()">NO</button>
        </div>
    `
})
export class NgbdModalConfirmationComponent {
    @Input() name;
    @Input() isConfirmed = new Subject();
    constructor(public activeModal: NgbActiveModal) { }

    yesClick() {
        this.isConfirmed.next(true);
        console.log(this.isConfirmed);
        this.activeModal.close('Close click');
    }

    noClick() {
        this.isConfirmed.next(false);
        console.log(this.isConfirmed);
        this.activeModal.close('Close click');
    }
}

И компонент, в котором я хочу его использовать.

profile.component.ts

 import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from "@angular/router"
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// import { ErrorMessageService } from "../share/error-messages.service";
import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from "@angular/forms";
import{ProfileService} from './profile-component.service';
import {ConfirmPopupService} from "../confirm-popup.service";
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {NgbdModalConfirmationComponent} from '../confirmation.component';
@Component({
  //selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css'],
  providers: [ProfileService,ConfirmPopupService]
})

export class ProfileComponent implements OnInit {

constructor(private profileService: ProfileService,private _fb: FormBuilder,private modalService:NgbModule) {
  }


deleteEdu(obj){

    const modalRef = this.modalService.open(NgbdModalConfirmationComponent);

    modalRef.componentInstance.name = 'KYC';

       modalRef.componentInstance.isConfirmed.subscribe(value => {
            console.log(value);
            if(value)
              {
                //perform delete operation
              }
            else{
               //dont perform delete operation
                }
         });
}

я не опубликовал весь код profile.component.ts, так как он очень длинный, опубликована только часть, где я хочу использовать Ngbmodule.

так что в основном то, что я хотел сделать, это когда пользователь нажимает «Удалить», тогда появляется модальное подтверждение, если пользователь нажимает «да», тогда операции удаления будут выполняться, иначе ничего не произойдет.

извините, что не разместил весь код ранее. благодарю вас.