After I install ng bootstrap and compile, I get this error
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]
Admin
Updated on December 16, 2020Comments
-
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 about 4 yearsthe same problem still persists.
-
Mario Perez about 4 yearscould you share your angular, bootstrap and ng-bootstrap versions? or a repo of you project perhaps
-
Akash Gadhiya about 4 yearsYup. This work for me after downgrading ng-bootstrap version.
-
Yura Galavay about 4 yearsYes, 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 about 4 yearsAlthough i ended up using angular/material, the installation process was similar since I forgot to commit or stash the angular update.
-
Rachit Tyagi about 4 yearsUpgrading angular version wo 9+ will help for me. Ngbootstrap 6+ needs angular version 9+
-
Simon Storr almost 4 yearsFixed 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 almost 4 yearsWorked for me too
-
Celso Soares almost 4 yearsI 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 about 3 yearsHey, 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