Metadata version mismatch Angular 4 @ng-bootstrap

Question

I am working on Angular bootstrap module. When I install the module using following commands npm install --save @ng-bootstrap/ng-bootstrap and import the module to the main app module. Then I rerun getting error for the following.

ERROR in Error: Metadata version mismatch for module F:/nodejs/angular4/mybootst
rap3/node_modules/@ng-bootstrap/ng-bootstrap/index.d.ts, found version 4, expect
ed 3, resolving symbol AppModule in F:/nodejs/angular4/mybootstrap3/src/app/app.
module.ts, resolving symbol AppModule in F:/nodejs/angular4/mybootstrap3/src/app
/app.module.ts

Here is my angular version

@angular/cli: 1.4.4
node: 6.11.2
os: win32 ia32
@angular/animations: 4.4.6
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.4
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4

Question

• Have to install angular latest version?.
• If I install latest version can I run my Angular 4 project?
• Why I'am getting this error?

Answer 1

The error is caused by the fact that ng-bootstrap module version that is installed has its metadata targeted for a higher version of Angular. To resolve this,

Find out which version of ng-bootstrap is currently installed by running

npm list ng-bootstrap

Run the following to see all the available versions of the ng-bootstrap node module.

npm show ng-bootstrap@* version

Pick one version lower than what is currently installed, and install it

npm install ng-bootstrap@x.y.z

*The xyz refers to version number.

Try npm start now, and see if it works.

If it doesn't, revert to one more lower version, and retry the above step of npm install.

Once it works - update package.json with the version number that resolved the issue so this issue doesn't appear again in the future. Let's say if version no. 1.3.0 solves the issue, then update the package json with.

"@ng-bootstrap/ng-bootstrap": "1.3.0"

Remove the caret (^) if it exists, to prevent auto-selecting the highest module version available.

Answer 2

This occurs because as of the latest version of @ng-bootstrap has issue.

I solved it by changing

 "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",

in the package.json to

 "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",

You need specify the correct version in the package.json otherwise it will fetch the latest ng-bootstrap which has issue working with angular 4