Metadata version mismatch for module

Question

Yesterday my program ran well with Angular 2 and Angular Material but when i tried to run today it is throwing this error. help me

ERROR in Error: Metadata version mismatch for module E:/Demo/crud/
node_modules/@angular/material/card/typings/index.d.ts, found version 4, expected 3, resolving symbol AppModule in E:/Demo/crud/client/app/a pp.module.ts, resolving symbol AppModule in E:/Demo/crud/client/app/ap p.module.ts [1] at Error (native) [1] at syntaxError (E:\Demo\crud\node_modules\@angular\compiler\bu
ndles\compiler.umd.js:1729:34) [1] at simplifyInContext (E:\Demo\crud\node_modules\@angular\compi
ler\bundles\compiler.umd.js:25118:23) [1] at StaticReflector.simplify (E:\Demo\crud\node_modules\@angula
r\compiler\bundles\compiler.umd.js:25130:13) [1] at StaticReflector.annotations (E:\Demo\crud\node_modules\@ang
ular\compiler\bundles\compiler.umd.js:24558:41) [1] at _getNgModuleMetadata (E:\Demo\crud\node_modules\@angular\co mpiler-cli\src\ngtools_impl.js:138:31) [1] at _extractLazyRoutesFromStaticModule (E:\Demo\crud\node_modul es\@angular\compiler-cli\src\ngtools_impl.js:109:26) [1] at Object.listLazyRoutesOfModule (E:\Demo\crud\node_modules\@a
ngular\compiler-cli\src\ngtools_impl.js:53:22) [1] at Function.NgTools_InternalApi_NG_2.listLazyRoutes (E:\Demo\c
rud\node_modules\@angular\compiler-cli\src\ngtools_api.js:91:39) [1]
at AotPlugin._getLazyRoutesFromNgtools (E:\Demo\crud\node_modu
les\@ngtools\webpack\src\plugin.js:207:44) [1] at _donePromise.Promise.resolve.then.then.then.then.then (E:\D emo\crud\node_modules\@ngtools\webpack\src\plugin.js:443:24) [1]
at process._tickCallback (internal/process/next_tick.js:109:7)

package.json

"dependencies": {
    "@angular/animations": "^5.0.2",
    "@angular/cdk": "^5.0.0-rc.1",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/material": "^5.0.0-rc.1",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "@types/underscore": "^1.8.4",
    "angular2-jwt": "^0.2.3",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.17.2",
    "bootstrap": "4.0.0-alpha.5",
    "core-js": "^2.4.1",
    "dotenv": "^4.0.0",
    "express": "^4.15.3",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "jsonwebtoken": "^8.0.1",
    "mongodb": "^2.2.31",
    "mongoose": "^4.12.1",
    "mongoose-gen": "^2.1.1",
    "mongoose-tie": "^1.0.0",
    "morgan": "^1.8.2",
    "rxjs": "^5.5.2",
    "tether": "1.4.0",
    "underscore": "^1.8.3",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.4.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "chai": "^4.1.0",
    "chai-http": "^3.0.0",
    "codelyzer": "~3.1.1",
    "concurrently": "^3.3.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "mocha": "^3.4.2",
    "nodemon": "1.11.0",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

As I am new, I expect a step by step guidance. Thanks

check module version in your package.json, which seems not match with reference and installed one. You can also try to install all node_modules again by npm install — Sandip - Frontend Developer
Looks like your angular version may be out of sync for some reason. Could you try deleting the entire E:/Demo/crud/node_modules/ folder, and then running npm install? — siege_Perilous
is there is any command to delete node_modules or can i delete directly from file? — user8631713
You have angular 4 mixed with angular 5, you should sync them — pixelbits

nclarx nclarx · Accepted Answer · 2017-11-24T10:10:22

As the commenters on your question have stated, you are mixing Angular 4 with @angular/[email protected], @angular/[email protected]. These require Angular 5.

Check out this issue on the Angular Material 2 github repo.

You can try updating the dependencies in your package.json to match the ones here:

  "dependencies": {
    "@angular/animations": "5.0.0",
    "@angular/cdk": "^5.0.0-rc0",
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",
    "@angular/material": "^5.0.0-rc0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@angular/platform-server": "5.0.0",
    "@angular/router": "5.0.0",
    "core-js": "^2.5.1",
    "hammerjs": "^2.0.8",
    "rxjs": "5.5.2",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "^1.5.3",
    "@angular/compiler-cli": "5.0.0",
    "@types/jasmine": "2.6.0",
    "@types/node": "^8.0.34",
    "codelyzer": "^3.2.1",
    "ts-node": "~3.3.0",
    "tslint": "~5.7.0",
    "typescript": "2.4.2"
  }

Then delete your node_modules folder and run npm install.

Metadata version mismatch for module

1 Answers