16

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.

peterh
  • 11,875
  • 18
  • 85
  • 108
Didula Nanayakkara
  • 197
  • 1
  • 2
  • 6

9 Answers9

39

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.

Dorian Turba
  • 3,260
  • 3
  • 23
  • 67
Sarthak Maheshwari
  • 492
  • 3
  • 6
  • 1
    Yup. This work for me after downgrading ng-bootstrap version. – Akash Gadhiya Feb 26 '20 at 07:32
  • 1
    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 :) – Symo Mar 31 '20 at 12:47
  • Worked for me too – Sajeer Babu Apr 07 '20 at 16:06
  • 1
    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: https://ng-bootstrap.github.io/#/getting-started – Celso Soares Apr 20 '20 at 16:56
  • 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 – Venkata Feb 09 '21 at 06:03
8

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

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.

Oscar
  • 973
  • 7
  • 10
6

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

Mario Perez
  • 2,777
  • 1
  • 12
  • 21
5
"@ng-bootstrap/ng-bootstrap": "^5.2.2"

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

Furkan Gulsen
  • 1,384
  • 2
  • 12
  • 24
2

Issue:

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.** and so on.....

Solution

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

   "dependencies": {

    "@ng-bootstrap/ng-bootstrap": "~5.2.2
Soft Dev Ahmad yar khan
  • 454
  • 5
  • 12
2

For my Angular 8 app, I used this dependency version: "@ng-bootstrap/ng-bootstrap": "~5.3.0"

Using 5.2.2 as mentioned previously, didn't work for me. Some tag attributes like cardClass (Ex: <ngb-panel [disabled]="disabled" [cardClass] ...>) are supported starting from 5.3.0.

You have also to execute the command npm i as mentioned in previous answers.

Youness Marhrani
  • 1,084
  • 16
  • 8
2

Just downgrade the ng-bootstrap package

npm i @ng-bootstrap/ng-bootstrap@5.3.0
chedli maaloul
  • 21
  • 1
0

I have also same issue to be solved by 

ng add @ng-bootstrap/schematics
ChandramouliS
  • 19
  • 2
  • 4
0

We can achieve this in two ways.

way 1:

step-1 Open angular.json file and downgrade the ng-bootstarp version as follow

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

step-2 run npm i

Way 2:

run ng add @angular/localize

either of the ways will fix your issue.

Anand Raja
  • 2,676
  • 1
  • 30
  • 35