After I install ng bootstrap and compile, I get this error

21,707

Solution 1

Replace @ng-bootstrap / ng-bootstrap in package.json with this :

"@ng-bootstrap/ng-bootstrap": "~5.2.2"

and do npm i

this worked fine for me.

Solution 2

Short Answer (if you are running Angular 8):
In your project, run the following command on the cli: npm install @ng-bootstrap/[email protected]

Long Answer:
Please check the version of your angular project and make sure you install the NgBootstrap version that is compatible with your angular project.

Take a look at the dependencies:
https://ng-bootstrap.github.io/#/getting-started

You can check the version of angular using the cli: ng version or you check your package.json file.

Solution 3

I had the same issue when trying to install ng-bootstrap at first, perhaps my troubleshooting can give you some insight.

I resolved this issue by updating angular and the CLI using:

ng update @angular/cli @angular/core

Then installed the bootstrap package via NPM (just in case you skipped it during the installation)

npm install bootstrap

afterwards I installed ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

after all this the app launched, but it was blank! so i checked the console and there was a message saying i had to add localize with the following command:

ng add @angular/localize

After these steps I had my angular app up and running, hope this helps.

EDIT: also don't forget to include the reference to node_modules/bootstrap/dist/css/bootstrap.min.css in your angular.json file

Solution 4

"@ng-bootstrap/ng-bootstrap": "^5.2.2"

Replace @ ng-bootstrap / ng-bootstrap in package.json with the section above. It will work.

Solution 5

Just downgrade the ng-bootstrap package

npm i @ng-bootstrap/[email protected]
Share:
21,707
Admin
Author by

Admin

Updated on December 16, 2020

Comments

  • Admin
    Admin over 3 years

    ERROR in node_modules/@ng-bootstrap/ng-bootstrap/accordion/accordion.d.ts:191:9 - error TS1086: An accessor cannot be declared in an ambient context.

    191 set ngbPanelToggle(panel: NgbPanel); ~~~~~~~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/checkbox.d.ts:28:9 - error TS1086: An accessor cannot be declared in an ambient context.

    28 set focused(isFocused: boolean); ~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts:14:9 - error TS1086: An accessor cannot be declared in an ambient context.

    14 get disabled(): boolean; ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts:15:9 - error TS1086: An accessor cannot be declared in an ambient context.

    15 set disabled(isDisabled: boolean); ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts:61:9 - error TS1086: An accessor cannot be declared in an ambient context.

    61 set value(value: any); ~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts:65:9 - error TS1086: An accessor cannot be declared in an ambient context.

    65 set disabled(isDisabled: boolean); ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts:66:9 - error TS1086: An accessor cannot be declared in an ambient context.

    66 set focused(isFocused: boolean); ~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts:67:9 - error TS1086: An accessor cannot be declared in an ambient context.

    67 get checked(): boolean; ~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts:68:9 - error TS1086: An accessor cannot be declared in an ambient context.

    68 get disabled(): boolean; ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts:69:9 - error TS1086: An accessor cannot be declared in an ambient context.

    69 get value(): any; ~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts:70:9 - error TS1086: An accessor cannot be declared in an ambient context.

    70 get nameAttr(): string; ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/carousel/carousel.d.ts:42:9 - error TS1086: An accessor cannot be declared in an ambient context.

    42 set interval(value: number); ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/carousel/carousel.d.ts:43:9 - error TS1086: An accessor cannot be declared in an ambient context.

    43 get interval(): number; ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/carousel/carousel.d.ts:47:9 - error TS1086: An accessor cannot be declared in an ambient context.

    47 set wrap(value: boolean); ~~~~ node_modules/@ng-bootstrap/ng-bootstrap/carousel/carousel.d.ts:48:9 - error TS1086: An accessor cannot be declared in an ambient context.

    48 get wrap(): boolean; ~~~~ node_modules/@ng-bootstrap/ng-bootstrap/carousel/carousel.d.ts[0m:58:9 - error TS1086: An accessor cannot be declared in an ambient context.

    58 set pauseOnHover(value: boolean); ~~~~~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/carousel/carousel.d.ts:59:9 - error TS1086: An accessor cannot be declared in an ambient context.

    59 get pauseOnHover(): boolean; ~~~~~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker-service.d.ts:16:9 - error TS1086: An accessor cannot be declared in an ambient context.

    16 get model$(): Observable; ~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker-service.d.ts:17:9 - error TS1086: An accessor cannot be declared in an ambient context.

    17 get dateSelect$(): Observable; ~~~~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker.d.ts:234:9 - error TS1086: An accessor cannot be declared in an ambient context.

    234 get state(): NgbDatepickerState; ~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker.d.ts:240:9 - error TS1086: An accessor cannot be declared in an ambient context.

    240 get calendar(): NgbCalendar; ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker-input.d.ts:200:9 - error TS1086: An accessor cannot be declared in an ambient context.

    200 get disabled(): any; ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker-input.d.ts:201:9 - errorm TS1086: An accessor cannot be declared in an ambient context.

    201 set disabled(value: any); ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker-month.d.ts:26:9 - error TS1086: An accessor cannot be declared in an ambient context.

    26 set month(month: NgbDateStruct); ~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/dropdown/dropdown.d.ts:15:9 - error TS1086: An accessor cannot be declared in an ambient context.

    15 set disabled(value: boolean); ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/dropdown/dropdown.d.ts:16:9 - error TS1086: An accessor cannot be declared in an ambient context.

    16 get disabled(): boolean; ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/modal/modal-ref.d.ts:40:9 - error TS1086: An accessor cannot be declared in an ambient context.

    40 get componentInstance(): any; ~~~~~~~~~~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/nav/nav.d.ts:64:9 - error TS1086: An accessor cannot be declared in an ambient context.

    64 get active(): boolean; ~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/nav/nav.d.ts:65:9 - error TS1086: An accessor cannot be declared in an ambient context.

    65 get id(): any; ~~ node_modules/@ng-bootstrap/ng-bootstrap/nav/nav.d.ts:66:9 - error TS1086: An accessor cannot be declared in an ambient context.

    66 get panelDomId(): string; ~~~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/progressbar/progressbar.d.ts:12:9 - error TS1086: An accessor cannot be declared in an ambient context.

    12 set max(max: number); ~~~ node_modules/@ng-bootstrap/ng-bootstrap/progressbar/progressbar.d.ts:13:9 - error TS1086: An accessor cannot be declared in an ambient context.

    13 get max(): number; ~~~ node_modules/@ng-bootstrap/ng-bootstrap/tabset/tabset.d.ts:91:9 - error TS1086: An accessor cannot be declared in an ambient context.

    91 set justify(className: 'start' | 'center' | 'end' | 'fill' | 'justified'); ~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/timepicker/timepicker.d.ts:35:9 - error TS1086: An accessor cannot be declared in an ambient context.

    35 set hourStep(step: number); ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/timepicker/timepicker.d.ts:36:9 - error TS1086: An accessor cannot be declared in an ambient context.

    36 get hourStep(): number; ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/timepicker/timepicker.d.ts:40:9 - error TS1086: An accessor cannot be declared in an ambient context.

    40 set minuteStep(step: number); ~~~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/timepicker/timepicker.d.ts:41:9 - error TS1086: An accessor cannot be declared in an ambient context.

    41 get minuteStep(): number; ~~~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/timepicker/timepicker.d.ts:45:9 - error TS1086: An accessor cannot be declared in an ambient context.

    45 set secondStep(step: number); ~~~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/timepicker/timepicker.d.ts:46:9 - error TS1086: An accessor cannot be declared in an ambient context.

    46 get secondStep(): number; ~~~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/timepicker/timepicker.d.ts:72:9 - error TS1086: An accessor cannot be declared in an ambient context.

    72 get isSmallSize(): boolean; ~~~~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/timepicker/timepicker.d.ts:73:9 - error TS1086: An accessor cannot be declared in an ambient context.

    73 get isLargeSize(): boolean; ~~~~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/tooltip/tooltip.d.ts:100:9 - error TS1086: An accessor cannot be declared in an ambient context.

    100 set ngbTooltip(value: string | TemplateRef); ~~~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/tooltip/tooltip.d.ts:101:9 - error TS1086: An accessor cannot be declared in an ambient context.

    101 get ngbTooltip(): string | TemplateRef;

    ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** i 「wdm」: Failed to compile.

  • Furkan Gulsen
    Furkan Gulsen about 4 years
    the same problem still persists.
  • Mario Perez
    Mario Perez about 4 years
    could you share your angular, bootstrap and ng-bootstrap versions? or a repo of you project perhaps
  • Akash Gadhiya
    Akash Gadhiya about 4 years
    Yup. This work for me after downgrading ng-bootstrap version.
  • Yura Galavay
    Yura Galavay about 4 years
    Yes, this works for me. ng update is needed to update angular to version 9+. ng add @angular/localize is needed if you are using ng-bootstrap >= v6 and angular > v9.
  • Mario Perez
    Mario Perez about 4 years
    Although i ended up using angular/material, the installation process was similar since I forgot to commit or stash the angular update.
  • Rachit Tyagi
    Rachit Tyagi about 4 years
    Upgrading angular version wo 9+ will help for me. Ngbootstrap 6+ needs angular version 9+
  • Simon Storr
    Simon Storr almost 4 years
    Fixed for me also. The docs say ng-bootstrap 6 is for Angular 9 (I'm on 8). I assumed it would be backwards compatible - guess not :)
  • Sajeer Babu
    Sajeer Babu almost 4 years
    Worked for me too
  • Celso Soares
    Celso Soares almost 4 years
    I had installed Angular 7 so i had to replace like this: "@ng-bootstrap/ng-bootstrap": "^4.2.1". Compatibility table is in this page: ng-bootstrap.github.io/#/getting-started
  • Venkata
    Venkata about 3 years
    Hey, you are really great, It made my job simple and it worked for me. Hail you. I tried for the solution for two days. Great. - Rammohan