ERROR in Error: Metadata version mismatch for module

[johns24]

Getting this error: ERROR in Error: Metadata version mismatch for module node_modules/angularx-qrcode/dist/index.d.ts, found version 4, expected 3, resolving symbol OrderHistoryModule in history.module.ts, resolving symbol OrderHistoryModule in history.module.ts My angular CLI version is 1.7.4 and my package.json:

{ "name": "n", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^4.2.4", "@angular/cdk": "2.0.0-beta.12", "@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": "2.0.0-beta.12", "@angular/platform-browser": "^4.2.4", "@angular/platform-browser-dynamic": "^4.2.4", "@angular/router": "^4.2.4", "@ng-bootstrap/ng-bootstrap": "^1.0.0", "@ngrx/effects": "^4.0.5", "@ngrx/store": "^4.0.3", "@types/date-fns": "^2.6.0", "angular-calendar": "^0.11.0", "angular2-datatable": "^0.6.0", "angularx-qrcode": "^1.0.2", "core-js": "^2.4.1", "date-fns": "^1.29.0", "mydatepicker": "^2.6.1", "ng-recaptcha": "^3.0.3", "ng2-cookies": "^1.0.12", "ngx-barcode": "^0.2.4", "ngx-loading": "^1.0.9", "ngx-mydatepicker": "^2.4.2", "rxjs": "^5.4.2", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "1.4.1", "@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", "codelyzer": "~3.1.1", "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", "protractor": "~5.1.2", "ts-node": "~3.2.0", "tslint": "~5.3.2", "typescript": "^2.7.0-rc" } }

[Cordobo]

Hi johns24,

this might be fixed by completely removing your node_modules folder and run npm install again on your project.

[sunnyxujian]

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. your project is 4.x.x , you must install below 1.0.0 version of this weight

[Cordobo]

@Itherma I'm a little bit confused by your comment, I neither see where @johns24 is on 5.x.x in his package.json nor where angularx-qrcode is probably on a worng version. could you please clarify and go into more detail?

[Cordobo]

Closed for now, please reopen if the issue persists.

[carrieXin]

maybe you should update "angularx-qrcode": "^1.0.2" to "angularx-qrcode": "1.0.1" in your package.json

[jameskleeh]

yarn.txt

@Cordobo I'm running into this right now with version 1.0.3. I've attached my yarn lock file

[jacksodj]

same issue. 1.0.3 on angular 4.4.7 found version 4 expected version 3. Oddly it worked for about a minute. tried the modules clear and reinstall, but this seems to be stuck with that bug/warning

difference between working and not was editing a CSS file. reverted those changes to no effect, very weird.

[jacksodj]

looks like re-running this line fixes it for some period of time: npm install angularx-qrcode@1.0.3 --save

[jacksodj]

ok, a little more detail, running npm start will throw the error. but if in a different window I run the npm install angularx-qrcode@1.0.3 --save the watcher in the first window will trigger and then recompile correctly.

Note: I also tried the change from ^1.0.3 to 1.0.3 in the package.json file

[utsav-gupta]

@Cordobo Why is this issue closed, has it been fixed?

[Cordobo]

@utsav-gupta it was closed because it couldn't be reproduced by me and the original author did not a provide a repo where I could reproduce it.

[stephen-eas]

same issue. 1.0.3 on angular 4.4.7 found version 4 expected version 3. Oddly it worked for about a minute. tried the modules clear and reinstall, but this seems to be stuck with that bug/warning

difference between working and not was editing a CSS file. reverted those changes to no effect, very weird.

Same setup as you, I was able to resolve and successfully build by changing from ^1.0.3 to 1.0.1 in the package.json file

After building and importing the module, you'll need to ensure you're using the correct attributes for the 1.x versions. From the docs below:

# Old code in 1.x
<qrcode [qrdata]="'Your data'" [size]="256" [level]="'M'" usesvg="true"></qrcode>

# New code in 2.x or 10.x
<qrcode [qrdata]="'Your data'" [width]="256" [errorCorrectionLevel]="'M'" [elementType]="'svg'"></qrcode>