ERROR in Metadata version mismatch for module node_modules/angular-2-local-storage/dist/index.d.ts, found version 4, expected 3

3
votes

I am using Angular2 application and getting below error with npm start command. this is whole codes ERROR in Metadata version mismatch for module /home/x/Desktop/koohbaad-web/node_modules/angular-2-local-storage/dist/index.d.ts, found version 4, expected 3, resolving symbol AppModule in /home/x/Desktop/koohbaad-web/src/app/app.module.ts, resolving symbol AppModule in /home/x/Desktop/koohbaad-web/src/app/app.module.ts, resolving symbol AppModule in /home/x/Desktop/koohbaad-web/src/app/app.module.ts

Here is my package.json file

{
  "name": "koohbad-tour",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 192.168.1.193",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.0",
    "@angular/animations": "^4.*",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@types/underscore": "^1.8.0",
    "angular-2-local-storage": "*",
    "angular-star-rating": "^3.0.8",
    "angular2-masonry": "^0.4.0",
    "angular2-recaptcha": "*",
    "angular2-text-mask": "^8.0.1",
    "core-js": "^2.4.1",
    "enhanced-resolve": "^3.3.0",
    "jquery": "^3.2.1",
    "ng-lazyload-image": "^3.3.3",
    "ng-select": "^1.0.0-beta.5",
    "ng2-select2": "^1.0.0-beta.10",
    "ngx-infinite-scroll": "^0.5.1",
    "node-sass": "^4.7.2",
    "rxjs": "^5.1.0",
    "screenfull": "^3.3.1",
    "underscore": "*",
    "web-animations-js": "^2.2.5",
    "zone.js": "^0.8.4",
    "ngx-swiper-wrapper": "4.0.0"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^2.0.42",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ngx-dropzone-wrapper": "^4.0.3",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}

And the error I'm getting is

ERROR in Metadata version mismatch for module node_modules/angular-2-local-storage/dist/index.d.ts, found version 4, expected 3 enter image description here

Please help me out.

4
angularangular-local-storage
You need to format this properly and explain in more detail how the problem occurs. – Nick

4 Answers

2
votes

Your package.json file has an error, there is no version number in angular-2-local-storage. It should be "angular-2-local-storage": "^2.0.0"

Please try to remove the node_modules directory afterwards and npm install again.

3
votes

This is caused because angular-2-local-storage has been built using Angular 5 and it generated metadata files version 4 (which your compiler can't understand because your angular 4 project only can read metadata files up to version 3) I recommend you update your project to Angular 5 and try again

1
votes

Angular-2-local-storage error is occurring because in package.json file, this dependency has empty value and the expected version for this dependency is 3. So, try installing this dependency again using command npm install dependencyName. (in your case dependency is angular-2-local-storage)

If no success, then explicitly modify the package.json for angular2-local-storage and give it value 3.0

And about the node-sass error, this is something that we get while making new projects for the first time on a machine. Its a guess as it has happened to me when i had installed angular cli for the first time, and run the application using ng serve. I think its a problem of non-updated modules or cli.

Try to update the node modules, angular-cli and then run the application. If problem persists, then goto github page for angular, where i think this issue has been listed.

-2
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 dependency

    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