Dependency not working with Angular 4

[romilbadhe]

Project Package JSON: { "name": "abc", "description": "", "homepage": ", "dependencies": { "@angular/animations": "4.3.6", "@angular/cdk": "2.0.0-beta.8", "@angular/common": "4.3.6", "@angular/compiler": "4.3.6", "@angular/core": "4.3.6", "@angular/forms": "4.3.6", "@angular/http": "4.3.6", "@angular/material": "2.0.0-beta.8", "@angular/platform-browser": "4.3.6", "@angular/platform-browser-dynamic": "4.3.6", "@angular/router": "4.3.6", "@ngx-translate/core": "^7.2.2", "@ngx-translate/http-loader": "^2.0.1", "@types/html2canvas": "0.0.33", "@types/jquery": "3.3.2", "angular-datatables": "4.4.0", "angular-hammer": "2.2.0", "angular2-font-awesome": "1.3.0", "angular2-text-mask": "9.0.0", "angular2-tinymce": "3.0.0", "bootstrap": "^3.3.7", "chart.js": "2.7.2", "classlist.js": "1.1.20150312", "core-js": "2.5.7", "datatables.net": "1.10.16", "datatables.net-dt": "1.10.16", "datatables.net-responsive": "^2.2.1", "datatables.net-responsive-dt": "^2.2.1", "file-saver": "1.3.8", "font-awesome": "4.7.0", "fontawesome": "4.7.2", "hammerjs": "2.0.8", "html2canvas": "^1.0.0-alpha.12", "jquery": "3.3.1", "jspdf": "^1.4.1", "material-design-icons": "3.0.1", "material-design-lite": "1.3.0", "material-modal": "0.1.3", "mydatepicker": "2.6.5", "ng2-charts": "1.6.0", "ng2-device-detector": "^1.0.1", "ng2-timezone-selector": "0.2.4", "popper.js": "1.14.3", "primeng": "4.1.0", "primeng-datatable-extensions": "0.0.2", "quill": "1.2.6", "rxjs": "5.4.2", "sweetalert2": "7.22.2", "tinymce": "4.7.13", "web-animations-js": "2.3.1", "zone.js": "0.8.12" }, "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, "devDependencies": { "@angular/cli": "1.6.7", "@angular/compiler-cli": "4.3.6", "@biesbjerg/ngx-translate-extract": "^2.3.4", "@types/datatables.net": "1.10.11", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "~3.0.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.0.4", "tslint": "~5.3.2", "typescript": "2.3.4", "@types/jspdf": "^1.1.31" } }

Compile error:

ERROR in Error: Metadata version mismatch for module D:/abc/node_modules/ng2-timezone-selector/ng2-timezone-selector.d.ts, found version 4, expected 3, resolving symbol AppModule in D:/abc/src/app/app.module.ts, resolving symbol AppModule in D:/abc/src/app/app.module.ts at syntaxError (D:\abc\node_modules\@angular\compiler\bundles\compiler.umd.js:1725:34) at simplifyInContext (D:\abc\node_modules\@angular\compiler\bundles\compiler.umd.js:24949:23) at StaticReflector.simplify (D:\abc\node_modules\@angular\compiler\bundles\compiler.umd.js:24961:13) at StaticReflector.annotations (D:\abc\node_modules\@angular\compiler\bundles\compiler.umd.js:24391:41) at _getNgModuleMetadata (D:\abc\node_modules\@angular\compiler-cli\src\ngtools_impl.js:138:31) at _extractLazyRoutesFromStaticModule (D:\abc\node_modules\@angular\compiler-cli\src\ngtools_impl.js:109:26) at Object.listLazyRoutesOfModule (D:\abc\node_modules\@angular\compiler-cli\src\ngtools_impl.js:53:22) at Function.NgTools_InternalApi_NG_2.listLazyRoutes (D:\abc\node_modules\@angular\compiler-cli\src\ngtools_api.js:91:39) at AotPlugin._getLazyRoutesFromNgtools (D:\abc\node_modules\@ngtools\webpack\src\plugin.js:240:66) at _donePromise.Promise.resolve.then.then.then.then.then (D:\abc\node_modules\@ngtools\webpack\src\plugin.js:493:24) at process._tickCallback (internal/process/next_tick.js:109:7)

[3fun]

I have the same issue

[NivedhaL20]

I have the same issue. So I have degraded the version of ng2-timezone-selector from 0.2.4 to 0.1.3. But still the issue.