Metadata version mismatch with Angular 4

27
votes

I am working on Angular 4 application and getting below error with "npm start" command -

ERROR in Metadata version mismatch for module C:/gitRepo/gmdias/gmdais-frontend/node_modules/@angular/animations/browser/browser.d.ts, found version 4, expected 3, resolving symbol ɵf in C:/gitRepo/gmdias/gmdais-frontend/node_modules/@angular/platform-browser/animations/index.d.ts, resolving symbol BrowserAnimationsModule in C:/gitRepo/gmdias/gmdais-frontend/node_modules/@angular/platform-browser/animations/index.d.ts, resolving symbol BrowserAnimationsModule in C:/gitRepo/gmdias/gmdais-frontend/node_modules/@angular/platform-browser/animations/index.d.ts

here is my package.json file 

{
  "name": "nucleus-web",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "transpile": "ngc",
    "package": "rollup -c",
    "minify": "uglifyjs dist/bundles/datatable.umd.js --screw-ie8 --compress --mangle --comments --output dist/bundles/datatable.min.js",
    "build": "npm run transpile && npm run package && npm run minify && ng build",
    "ng": "ng",
    "start": "ng serve",
    "postinstall": "ng build",
    "test": "sh build.sh"
  },
  "private": true,
  "peerDependencies": {
    "@angular/core": "^4.0.1"
  },
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/cdk": "^2.0.0-beta.12",
    "@angular/common": "^4.0.1",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.1",
    "@angular/forms": "^4.0.1",
    "@angular/http": "^4.0.0",
    "@angular/material": "^2.0.0-beta.12",
    "@angular/platform-browser": "^4.2.5",
    "@angular/platform-browser-dynamic": "^4.0.1",
    "@angular/platform-server": "^4.4.4",
    "@angular/router": "^4.0.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
    "bootstrap": "3.3.7",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "lodash": "^4.17.4",
    "ng2-file-upload": "^1.2.1",
    "ng2-toastr": "^4.1.2",
    "ngx-bootstrap": "^1.7.1",
    "ngx-treeview": "1.2.3",
    "ngx-webstorage": "^1.8.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@angular/cli": "1.0.3",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^3.2.15",
    "@types/node": "~8.0.33",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~3.3.0",
    "tslint": "~4.5.0",
    "@angular/compiler": "^4.4.4",
    "@angular/compiler-cli": "^4.4.4",
    "rollup": "^0.50.0",
    "typescript": "^2.5.3",
    "uglify-js": "^3.1.3"
  },
  "repository": {
    "type": "git",
    "url": "ssh://git@stash.aexp.com/stash/scm/pzn/gmdais-frontend.git"
  }
}
8
angular
the error code is not enough here – smnbbrv
@smnbbrv please let me know additional detail required ?? – Rup
this is a really hard to say thing. It looks like something is wrong with some of the versions but it is nearly impossible to say how to fix it without debugging the whole app... Is it possible to have it as github repo? – smnbbrv

8 Answers

29
votes

Your @angular/animations is on version 5.x.x and other @angular/ packages are on 4.x.x. All @angular/* packages must be aligned, i.e. have the exact same version number for the app to be able to compile.

The concrete error you're gettings comes from the .metadata.json files which have a "version" field inside. @angular/*@4.x.x uses version 3 and @angular/*@5.x.x uses version 4 (for now).

8
votes

Problem solved: Simply run this command in terminal at your project directory location:

npm install @angular/animations@'^5.0.0' @angular/common@'^5.0.0' @angular/compiler@'^5.0.0' @angular/compiler-cli@'^5.0.0' @angular/core@'^5.0.0' @angular/forms@'^5.0.0' @angular/http@'^5.0.0' @angular/platform-browser@'^5.0.0' @angular/platform-browser-dynamic@'^5.0.0' @angular/platform-server@'^5.0.0' @angular/router@'^5.0.0' typescript@2.4.2 rxjs@'^5.5.2'

This above command basically updates different angular modules to version 5.

Syntax:

npm install @angular/moduleName'^5.0.0'

4
votes

I got the same problem when updating angular from 4 to 5. The problem was that I updated only my prod dependencies but I forgot to update my dev dependencies too.

1
votes

We got a similar issue in one of our projects. In package.json file for some modules which has compatibility issues with Angular 4 and Angular 5

For Example in package.json

  "@ng-bootstrap/ng-bootstrap": "1.0.0",

Show issues while building/compiling code if you project has no Angular 5 compatible modules. So for fixing such issues, we need to identify its compatible version with Angular 4 and need to manually install with following command

 npm install @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 --save

Similarly, we need to check our project/Node compatible version of modules need to be updated in our package.json

This method solved our issues. Please try in this way

1
votes

My solution was to downgrade the package that was causing the error. First though, I had to find which version of the package had the lower metadata version. To do that I started a new test folder, and installed different versions of my plugin until I found one that had a "version":3 in index.metadata.json

mkdir test_1
cd test_1
npm init
npm install @ionic-native/code-push@4.3.3

In my case 4.3.3 was the latest version before they upgraded to Angular 5 (metadata version 4)

Ultimately though, for those using Ionic, I had to upgrade to ionic 3.9.2 anyway, so that solved the issues as well.

1
votes

In case that you can not update your Angular 4 project to Angular 5, for some reason (time), I suggest look this approach for solve this error without migrate. Use repair-mismatch utility for change version on metadata files.

  1. In an Angular 4 project install repair-mismatch module as develop dependecy

    npm i @jagcolombat/repair-mismatch --save-dev

  2. Create a file JavaScript, for example rpmm.js, and input the following snippet code:

    const rpmm = require('repair-mismatch'); rpmm({ modules: ['ngx-vis'] });

Note: In this case i use ngx-vis@1.0.1 (compiled with Angular 6) and I want to use this in an Angular 4 project.

  1. Run this command for change metadata version in specified modules (ngx-vis) :

    node rpmm.js

For more detail read this article:

https://medium.com/@tonytunes2005/solving-error-mismatch-beetwen-angular-versions-b051e7cde418

0
votes

You can try this:

npm audit fix

and then

npm install

It is helped me!

0
votes

Getting this error ?

ERROR in Error: Metadata version mismatch for module E:/SanthoshRaj-Work/Angular/clientpanel/node_modules/@angular/fire/index.d.ts, found version 4, expected 3, resolving symbol AppModule in E:/SanthoshRaj-Work/Angular/clientpanel/src/app/app.module.ts, resolving symbol AppModule in E:/SanthoshRaj-Work/Angular/clientpanel/src/app/app.module.ts, resolving symbol AppModule in E:/SanthoshRaj-Work/Angular/clientpanel/src/app/app.module.ts
at syntaxError (E:\SanthoshRaj-Work\Angular\clientpanel\node_modules\@angular\compiler\bundles\compiler.umd.js:1729:34)
at simplifyInContext (E:\SanthoshRaj-Work\Angular\clientpanel\node_modules\@angular\compiler\bundles\compiler.umd.js:24979:23)
at StaticReflector.simplify (E:\SanthoshRaj-Work\Angular\clientpanel\node_modules\@angular\compiler\bundles\compiler.umd.js:24991:13)
at StaticReflector.annotations (E:\SanthoshRaj-Work\Angular\clientpanel\node_modules\@angular\compiler\bundles\compiler.umd.js:24418:41)
at _getNgModuleMetadata (E:\SanthoshRaj-Work\Angular\clientpanel\node_modules\@angular\compiler-cli\src\ngtools_impl.js:138:31)
at _extractLazyRoutesFromStaticModule (E:\SanthoshRaj-Work\Angular\clientpanel\node_modules\@angular\compiler-cli\src\ngtools_impl.js:109:26)
at Object.listLazyRoutesOfModule (E:\SanthoshRaj-Work\Angular\clientpanel\node_modules\@angular\compiler-cli\src\ngtools_impl.js:53:22)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (E:\SanthoshRaj-Work\Angular\clientpanel\node_modules\@angular\compiler-cli\src\ngtools_api.js:91:39)
at AotPlugin._getLazyRoutesFromNgtools (E:\SanthoshRaj-Work\Angular\clientpanel\node_modules\@ngtools\webpack\src\plugin.js:212:44)
at _donePromise.Promise.resolve.then.then.then.then.then (E:\SanthoshRaj-Work\Angular\clientpanel\node_modules\@ngtools\webpack\src\plugin.js:448:24)
at process.internalTickCallback (internal/process/next_tick.js:77:7)

Follow below steps:

Step 1: You need to update Angular version 4 to Angular version 5. that's it, it is working fine for me.

Step 2: Install all below dependencies

npm install @angular/animations@'^5.0.0' @angular/common@'^5.0.0' @angular/compiler@'^5.0.0' @angular/compiler-cli@'^5.0.0' @angular/core@'^5.0.0' @angular/forms@'^5.0.0' @angular/http@'^5.0.0' @angular/platform-browser@'^5.0.0' @angular/platform-browser-dynamic@'^5.0.0' @angular/platform-server@'^5.0.0' @angular/router@'^5.0.0' typescript@2.4.2 rxjs@'^5.5.2'