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.