Ng-bootstrap and Angular 9 compatibility

问题

After upgrading to Angular 9, I am getting the following errors relative to ng-bootstrap:

ERROR in src/app/shared/Components/form-controls/dropdown-select/dropdown-select.component.ts:87:63 - error TS2304: Cannot find name 'NgbDropdownMenu'.

87 @ViewChild('dropdownMenu', { static: false }) dropDownMenu: NgbDropdownMenu; ~~~~~~~~~~~~~~~ src/app/private/private-shared/Services/ngb-modal-stack-extend.service.ts:1:39 - error TS2305: Module '"../../../../../../../../../../../node_modules/@ng-bootstrap/ng-bootstrap"' has no exported member 'isString'. 1 import { NgbModalRef, NgbActiveModal, isString, isDefined, NgbModalBackdrop, ContentRef, NgbModal, NgbModalWindow } from '@ng-bootstrap/ng-bootstrap'; ~~~~~~~~ src/app/private/private-shared/Services/ngb-modal-stack-extend.service.ts:1:49 - error TS2305: Module '"../../../../../../../../../../../node_modules/@ng-bootstrap/ng-bootstrap/ng-bootstrap"' has no exported member 'isDefined'. 1 import { NgbModalRef, NgbActiveModal, isString, isDefined, NgbModalBackdrop, ContentRef, NgbModal, NgbModalWindow } from '@ng-bootstrap/ng-bootstrap'; ~~~~~~~~~ src/app/private/private-shared/Services/ngb-modal-stack-extend.service.ts:1:60 - error TS2305: Module '"../../../../../../../../../../../node_modules/@ng-bootstrap/ng-bootstrap/ng-bootstrap"' has no exported member 'NgbModalBackdrop'.

1 import { NgbModalRef, NgbActiveModal, isString, isDefined, NgbModalBackdrop, ContentRef, NgbModal, NgbModalWindow } from '@ng-bootstrap/ng-bootstrap'; ~~~~~~~~~~~~~~~~ src/app/private/private-shared/Services/ngb-modal-stack-extend.service.ts:1:78 - error TS2305: Module '"../../../../../../../../../../../node_modules/@ng-bootstrap/ng-bootstrap/ng-bootstrap"' has no exported member 'ContentRef'. 1 import { NgbModalRef, NgbActiveModal, isString, isDefined, NgbModalBackdrop, ContentRef, NgbModal, NgbModalWindow } from '@ng-bootstrap/ng-bootstrap'; ~~~~~~~~~~ src/app/private/private-shared/Services/ngb-modal-stack-extend.service.ts:1:100 - error TS2305: Module '"../../../../../../../../../../../node_modules/@ng-bootstrap/ng-bootstrap/ng-bootstrap"' has no exported member 'NgbModalWindow'.

1 import { NgbModalRef, NgbActiveModal, isString, isDefined, NgbModalBackdrop, ContentRef, NgbModal, NgbModalWindow } from '@ng-bootstrap/ng-bootstrap';


Package.json 

    "@angular/cdk": "9.2.4",
    "@angular/common": "9.1.11",
    "@angular/compiler": "9.1.11",
    "@angular/core": "9.1.11",
    "@angular/forms": "9.1.11",
    "@angular/localize": "9.1.11",
    "@angular/material": "9.2.4",
    "@angular/platform-browser": "9.1.11",
    "@angular/platform-browser-dynamic": "9.1.11",
    "@angular/router": "9.1.11",
    "@ng-bootstrap/ng-bootstrap": "4.1.2",
    "rxjs": "6.3.3",
    },
    "devDependencies": {
       "@angular-builders/jest": "^7.2.0",
      "@angular-devkit/build-angular": "~0.1000.0",
      "@angular/cli": "^9.1.9",
      "@angular/compiler-cli": "9.1.11",
      "@schematics/angular": "^9.1.5",

回答1:

update your version related to below table

  ng-bootstrap    Angular Bootstrap CSS
    1.x.x           5.0.2   4.0.0
    2.x.x           6.0.0   4.0.0
    3.x.x           6.1.0   4.0.0
    4.x.x           7.0.0   4.0.0
    5.x.x           8.0.0   4.3.1
    6.x.x           9.0.0   4.4.1

回答2:

ng-bootstrap 4.x.x is meant for Angular 7. You need to update it to ng-bootstrap 6.x.x in order for it to work with Angular 9. Here you may check ng-bootsrap compatibility table as well as installation instructions

来源：https://stackoverflow.com/questions/62625522/ng-bootstrap-and-angular-9-compatibility

标签

angular

ng-bootstrap