Ng-bootstrap and Angular 9 compatibility

Question

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

I have added import { NgbDropdownMenu } from '@ng-bootstrap/ng-bootstrap' and i m getting an error Property '_menu' is private and only accessible within class 'NgbDropdown' for this code: @ViewChild('dropdownMenu', { static: false }) dropDownMenu: NgbDropdownMenu; @HostListener('window:resize') onResize() { if ( this.dropDownMenu.isOpen && this.dropDownMenu.dropdown._menu.placement === 'top' — A.A
– A.A, Commented Jun 28, 2020 at 17:30

SwissCodeMen · Accepted Answer · 2020-09-25 08:56:01Z

3

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
    7.x.x          10.0.0   4.5.0

edited Sep 25, 2020 at 8:56

SwissCodeMen

5,03310 gold badges31 silver badges39 bronze badges

answered Jun 28, 2020 at 18:17

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

alexortizl · Accepted Answer · 2020-06-28 17:49:15Z

1

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

answered Jun 28, 2020 at 17:49

alexortizl

2,7173 gold badges18 silver badges34 bronze badges

Collectives™ on Stack Overflow

Ng-bootstrap and Angular 9 compatibility

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related