Metadata version mismatch with Angular 4

Question

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://[email protected]/stash/scm/pzn/gmdais-frontend.git"
  }
}

Answer 1

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).

Answer 2

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' [email protected] rxjs@'^5.5.2'

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

Syntax:

npm install @angular/moduleName'^5.0.0'

Answer 3

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.