Metadata version mismatch for module ng2-dnd

reloaded commented 6 years ago

I'm submitting a ... [x ] bug report [ ] feature request [ ] question about the decisions made in the repository
Do you want to request a feature or report a bug? Bug
What is the current behavior?

After including ng2-dnd via npm install --save ng2-dnd compilation fails. Compilation is run through angular's ng-cli

ERROR in Error: Metadata version mismatch for module C:/UI.Angular/node_modules/ng2-dnd/ng2-dnd.d.ts, found version 4, expected 3, resolving symbol FiModule in C:/UI.Angular/src/app/fi/fi.module.ts, resolving symbol FiModule in C:/UI.Angular/src/app/fi/fi.module.ts

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar.
What is the expected behavior? Compilation should succeed after including the latest ng2-dnd into an angular 4.x project.

Please tell us about your environment:

"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/common": "^4.4.3",
"@angular/compiler": "^4.4.3",
"@angular/compiler-cli": "^4.4.3",
"@angular/core": "^4.4.3",
"@angular/forms": "^4.4.3",
"@angular/http": "^4.4.3",
"@angular/platform-browser": "^4.4.3",
"@angular/platform-browser-dynamic": "^4.4.3",
"@angular/router": "^4.4.3",
"@ngui/auto-complete": "^0.16.0",
"@swimlane/ngx-charts": "^6.0.2",
"angular2-cookie": "^1.2.6",
"angular2-text-mask": "^8.0.3",
"angular2-toaster": "^4.0.1",
"angular2-ui-switch": "^1.2.0",
"angular2-wizard": "^0.4.0",
"bootstrap-sass": "^3.3.7",
"core-js": "^2.4.1",
"d3": "^4.10.2",
"font-awesome-sass": "^4.7.0",
"intl": "^1.2.5",
"ng2-auto-complete": "^0.12.0",
"ng2-ckeditor": "^1.1.9",
"ng2-completer": "^1.6.3",
"ng2-dnd": "^5.0.2",
"ng2-smart-table": "^1.2.2",
"ngx-bootstrap": "^1.9.1",
"ngx-toggle-switch": "^1.3.9",
"rxjs": "^5.5.2",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "^1.4.2",
"@angular/compiler-cli": "^4.4.3",
"@angular/language-service": "^4.4.3",
"@types/d3": "^4.10.0",
"@types/jasmine": "2.6.0",
"@types/node": "~8.0.31",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-junit-reporter": "^1.2.0",
"karma-phantomjs-launcher": "^1.0.4",
"phantomjs-prebuilt": "^2.1.15",
"protractor": "~5.1.2",
"ts-node": "~3.3.0",
"tslint": "~5.7.0",
"typescript": "^2.5.3"
}

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

ERROR in Error: Metadata version mismatch for module C:/UI.Angular/node_modules/ng2-dnd/ng2-dnd.d.ts, found version 4, expected 3, resolving symbol FiModule in C:/UI.Angular/src/app/fi/fi.module.ts, resolving symbol FiModule in C:/UI.Angular/src/app/fi/fi.module.ts
    at syntaxError (C:\UI.Angular\node_modules\@angular\compiler\bundles\compiler.umd.js:1729:34)
    at simplifyInContext (C:\UI.Angular\node_modules\@angular\compiler\bundles\compiler.umd.js:24979:23)
    at StaticReflector.simplify (C:\UI.Angular\node_modules\@angular\compiler\bundles\compiler.umd.js:24991:13)
    at StaticReflector.annotations (C:\UI.Angular\node_modules\@angular\compiler\bundles\compiler.umd.js:24418:41)
    at _getNgModuleMetadata (C:\UI.Angular\node_modules\@angular\compiler-cli\src\ngtools_impl.js:138:31)
    at _extractLazyRoutesFromStaticModule (C:\UI.Angular\node_modules\@angular\compiler-cli\src\ngtools_impl.js:109:26)
    at includeLazyRouteAndSubRoutes (C:\UI.Angular\node_modules\@angular\compiler-cli\src\ngtools_impl.js:66:25)
    at Array.reduce (native)
    at Object.listLazyRoutesOfModule (C:\UI.Angular\node_modules\@angular\compiler-cli\src\ngtools_impl.js:54:36)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\UI.Angular\node_modules\@angular\compiler-cli\src\ngtools_api.js:91:39)
    at AotPlugin._getLazyRoutesFromNgtools (C:\UI.Angular\node_modules\@ngtools\webpack\src\plugin.js:241:66)
    at _donePromise.Promise.resolve.then.then.then.then.then (C:\UI.Angular\node_modules\@ngtools\webpack\src\plugin.js:495:24)
    at process._tickCallback (internal/process/next_tick.js:103:7)
Date: 2017-11-29T22:13:16.999Z
Hash: 64b0e6527fce3f6bb421
Time: 17105ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 491 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 1.48 MB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 772 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 12.9 MB [initial] [rendered]

webpack: Failed to compile.

namdt40 commented 6 years ago

Hi, i use angular 4.x, and install with npm install ng2-dnd --save. i got same error. Enviroment: "dependencies": { "@angular/animations": "^4.4.5", "@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-beta.5", "@swimlane/ngx-datatable": "^10.3.0", "angular-date-value-accessor": "0.0.2", "angular-icm-tree": "^4.0.5", "angular-tree-component": "^5.2.0", "body-parser": "^1.18.2", "bootstrap": "^4.0.0-beta", "core-js": "^2.4.1", "dotenv": "^4.0.0", "ej-angular2": "^15.4.18", "express": "^4.16.2", "font-awesome": "^4.7.0", "jquery": "^3.2.1", "lodash": "^4.17.4", "morgan": "^1.9.0", "ng-zorro-antd": "^0.6.0-rc.3", "ng2-dnd": "^5.0.2", "ng2-table": "^1.3.2", "ngx-treeview": "^1.2.3", "path": "^0.12.7", "popper.js": "^1.12.5", "primeng": "^4.2.4", "rxjs": "^5.0.1", "tether": "^1.4.0", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "1.4.1", "@angular/compiler-cli": "^4.2.4", "@angular/language-service": "^4.2.4", "@angular/tsc-wrapped": "^4.4.6", "@types/ej.web.all": "^15.4.0", "@types/express": "^4.0.37", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/jquery": "^3.2.16", "@types/lodash": "^4.14.86", "@types/node": "~6.0.60", "codelyzer": "~3.1.1", "concurrently": "^3.5.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", "nodemon": "^1.12.1", "protractor": "~5.1.2", "ts-node": "~3.2.0", "tslint": "~5.3.2", "typescript": "~2.3.3" }

error message:

[0] ERROR in Error: Metadata version mismatch for module D:/project/Net/QLTBG/frontend/node_modules/ng2-dnd/ng2-dnd.d.ts, found version 4, expected 3, resolving symbol AppModule in D:/project/Net/QLTBG/frontend/src/app/app.module.ts, resolving symbol AppModule in D:/project/Net/QLTBG/frontend/src/app/app.module.ts, resolving symbol AppModule in D:/project/Net/QLTBG/frontend/src/app/app.module.ts [0] at syntaxError (D:\project\Net\QLTBG\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:1729:34) [0] at simplifyInContext (D:\project\Net\QLTBG\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:25118:23) [0] at StaticReflector.simplify (D:\project\Net\QLTBG\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:25130:13) [0] at StaticReflector.annotations (D:\project\Net\QLTBG\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:24558:41) [0] at _getNgModuleMetadata (D:\project\Net\QLTBG\frontend\node_modules\@angular\compiler-cli\src\ngtools_impl.js:138:31) [0] at _extractLazyRoutesFromStaticModule (D:\project\Net\QLTBG\frontend\node_modules\@angular\compiler-cli\src\ngtools_impl.js:109:26) [0] at Object.listLazyRoutesOfModule (D:\project\Net\QLTBG\frontend\node_modules\@angular\compiler-cli\src\ngtools_impl.js:53:22) [0] at Function.NgTools_InternalApi_NG_2.listLazyRoutes (D:\project\Net\QLTBG\frontend\node_modules\@angular\compiler-cli\src\ngtools_api.js:91:39) [0] at AotPlugin._getLazyRoutesFromNgtools (D:\project\Net\QLTBG\frontend\node_modules\@ngtools\webpack\src\plugin.js:207:44) [0] at _donePromise.Promise.resolve.then.then.then.then.then (D:\project\Net\QLTBG\frontend\node_modules\@ngtools\webpack\src\plugin.js:443:24) [0] at [0] at process._tickCallback (internal/process/next_tick.js:188:7)

please help. thanks

nachogarrone commented 6 years ago

Hi!

I downgraded to "ng2-dnd": "^4.0.0" and it worked, it installed the version 4.2.0

Coruscate5 commented 6 years ago

You could just change the metadata version to 3, like it expects, in the ng2-metadata.json file in the node_modules folder

alereisan commented 6 years ago

Either Upgrade Angular to Version 5, or downgrade the ng2-dnd npm package, like nachagarrone mentioned.

How to downgrade: npm uninstall ng2-dnd --save npm install ng2-dnd@^4.0.0 --save

Soindek commented 6 years ago

The best solution would be if you didn't fix the versions in the package.json. As it's a framework library it should be up to the user which angular version he choose. Simple example how it is done in other libraries:

"peerDependencies": {
    "@angular/common": "^2.3.1 || >=4.0.0",
    "@angular/compiler": "^2.3.1 || >=4.0.0",
    "@angular/core": "^2.3.1 || >=4.0.0",
    "@angular/forms": "^2.3.1 || >=4.0.0"
  },

quocthanhmonsterpixel commented 6 years ago

Still error when i run "ng serve"

My package.json { "name": "SP", "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/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/platform-browser": "^4.2.4", "@angular/platform-browser-dynamic": "^4.2.4", "@angular/router": "^4.2.4", "@ngx-translate/core": "^8.0.0", "bootstrap": "4.0.0-beta.2", "core-js": "^2.4.1", "font-awesome": "^4.7.0", "hammerjs": "^2.0.8", "jquery": "^3.2.1", "ng-sidebar": "^6.0.4", "ng2-dnd": "^5.0.2", "ngx-carousel": "^1.3.5", "popper.js": "^1.12.9", "rxjs": "^5.4.2", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "1.3.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", "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.3.3" } }

The error message:

ERROR in Metadata version mismatch for module /Users/macpro/Documents/project/-WEB-SproutBeat/-WEB-SproutBeat/node_modules/ng2-dnd/ng2-dnd.d.ts, foundversion 4, expected 3, resolving symbol AppModule in /Users/macpro/Documents/project/-WEB-SproutBeat/-WEB-SproutBeat/src/app/app.module.ts, resolving symbol AppModule in /Users/macpro/Documents/project/-WEB-SproutBeat/-WEB-SproutBeat/src/app/app.module.ts, resolving symbol AppModule in /Users/macpro/Documents/project/-WEB-SproutBeat/-WEB-SproutBeat/src/app/app.module.ts

webpack: Failed to compile.

Roshankrsoni commented 5 years ago

Use it npm install ng2-dnd@^4.0.0 --save problem solved.

akserg / ng2-dnd

Metadata version mismatch for module ng2-dnd #231