Angular 5 ng-bootstrap Type 'ElementRef' is not generic err

Question

I use angular 5 and ng-bootstrap in these versions:

  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@ng-bootstrap/ng-bootstrap": "^2.1.0",
    "angular-in-memory-web-api": "^0.5.4",
    "angular2-moment": "^1.9.0",
    "bootstrap": "^4.1.1",
    "core-js": "^2.4.1",
    "date-util": "^1.2.1",
    "material-icons": "^0.2.1",
    "ngx-bootstrap": "^3.0.0",
    "normalize.css": "^8.0.0",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },

when I get ng serve has this error:

**

Failed to compile.

node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts(58,96): error TS2315: Type 'ElementRef' is not generic. node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker-input.d.ts(121,67): error TS2315: Type 'ElementRef' is not generic. node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker.d.ts(115,208): error TS2315: Type 'ElementRef' is not generic. node_modules/@ng-bootstrap/ng-bootstrap/dropdown/dropdown.d.ts(12,45): error TS2315: Type 'ElementRef' is not generic. node_modules/@ng-bootstrap/ng-bootstrap/dropdown/dropdown.d.ts(29,45): error TS2315: Type 'ElementRef' is not generic. node_modules/@ng-bootstrap/ng-bootstrap/dropdown/dropdown.d.ts(37,44): error TS2315: Type 'ElementRef' is not generic. node_modules/@ng-bootstrap/ng-bootstrap/modal/modal-window.d.ts(13,40): error TS2315: Type 'ElementRef' is not generic.

Answer 1

I had the same issue. So I unistalled the ng-bootstrap .

Then I reinstall it directly whit 2.0.0 version.

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

Answer 2

You need to use Angular 6.0.0 or later with ng-bootstrap >= 2.0.0. npm / yarn install should have given you warning during installation.

Reverting to ng-bootstrap 2.0.0 is not a solution as you will simply be stuck with this version of a library and won't receive updates / fixes.

To properly resolve this issue you need to either:

• upgrade Angular to version 6.0.0 or later (recommended)
• use lates ng-bootstrap still compatible with Angular 5.x (1.1.2)

Answer 3

Change your ng-bootstrap version to "2.0.0"

"@ng-bootstrap/ng-bootstrap": "2.0.0"

and then npm install & try serve the application.

I faced the same issue and above method worked for me.

Answer 4

I am suddenly facing the same issue.

In my case I was using ng-boostrasp 2.0.0, but I was specifying dependencies this way:

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

Which at some point in time (based on logs from past successful builds : somewhere since june the 1st) started to pickup version 2.1.0.

So I changed my package.json to pick exactly 2.0.0:

"@ng-bootstrap/ng-bootstrap": "2.0.0"

This fixed the problem from me.

Answer 5

After installing the latest ng- bootstrap which showed an error on serve.

Finally, doing this

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

helped.

Answer 6

Install ng-bootstrap checking the version compatibility.

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 

You can find the version details under versions tab here, https://www.npmjs.com/package/@ng-bootstrap/ng-bootstrap