Error while implementing calendar from primeng in angular

Question

I am trying to use calender of primeng in angular v4 to display time and date. I have aforementioned the places where i define the module,html where i have defined the calendar, package.json and error. Please let me know if any more thing needs to be mentioned to clear the error.

I have defined it in

master-system.module.ts

import { CalendarModule } from 'primeng/components/calendar/calendar'

@NgModule({
 CalendarModule,

  ],
 declarations: [], 
 providers:[ToasterService]

 })

transaction.component.ts

import { CalendarModule } from 'primeng/components/calendar/calendar'

And used in

transaction.component.html

   <div class="ui-g-12 ui-md-4">
                  <h3>Time</h3>
                  <p-calendar [(ngModel)]="date7" [showTime]="true"> 
   </p-calendar> {{date7}}
              </div>

package.json

 {
 "name": "cateina-tech",
 "version": "1.0.0-alpha.6",
 "description": "Open Source Bootstrap Admin Template",
 "author": "",
  "url": "http://cateina.com",
  "scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
 },
"private": true,
"dependencies": {
"@angular/common": "4.3.4",
"@angular/compiler": "4.3.4",
"@angular/core": "4.3.4",
"@angular/forms": "4.3.4",
"@angular/http": "4.3.4",
"@angular/platform-browser": "4.3.4",
"@angular/platform-browser-dynamic": "4.3.4",
"@angular/router": "4.3.4",
"@angular/upgrade": "4.3.4",
"angular-2-local-storage": "^1.0.1",
"angular-localstorage": "^1.1.5",
"body-parser": "^1.18.2",
"chart.js": "2.6.0",
"core-js": "2.5.0",
"cors": "^2.8.4",
"date-time": "^2.1.0",
"express": "^4.16.2",
"express-jwt": "^5.3.1",
"express-session": "^1.15.6",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"jsonwebtoken": "^8.2.0",
"jwt-decode": "^2.2.0",
"localstorage": "^0.1.0",
"moment": "2.18.1",
"mysql": "^2.15.0",
"mysql-server": "^1.0.5",
"ng2-charts": "1.6.0",
"ng2-order-pipe": "^0.1.5",
"ng2-search-filter": "^0.4.7",
"ngx-bootstrap": "1.8.1",
"ngx-ellipsis": "^1.0.7",
"ngx-gauge": "^1.0.0-beta.2",
"ngx-loading": "^1.0.14",
"ngx-pagination": "^3.1.0",
"node-datetime": "^2.0.6",
"nodemailer": "^4.6.3",
"nodemon": "^1.17.3",
"path": "*",
"pepipost-sdk-nodejs": "^0.4.0",
"primeng": "^5.2.4",
"q": "^1.5.1",
"request": "^2.83.0",
"request-promise": "^4.2.2",
"restify": "^6.3.4",
"rootpath": "^0.1.2",
"rxjs": "5.4.3",
"save": "^2.3.2",
"ts-helpers": "1.1.2",
"zone.js": "0.8.16"
},
"devDependencies": {
"@angular/cli": "^1.7.3",
"@angular/compiler-cli": "4.3.4",
"@types/jasmine": "2.5.53",
"@types/node": "8.0.20",
"codelyzer": "3.1.2",
"jasmine-core": "2.7.0",
"jasmine-spec-reporter": "4.2.0",
"karma": "1.7.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "1.3.0",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"protractor": "5.1.2",
"ts-node": "3.3.0",
"tslint": "5.6.0",
"typescript": "^2.3.4"
 },
 "engines": {
  "node": ">= 6.9.0",
  "npm": ">= 3.0.0"
 }
 }

Error in angular terminal

ERROR in Error: Metadata version mismatch for module /home/dell/Downloads/Adaani5.0.0/node_modules/primeng/components/calendar/calendar.d.ts,found version 4, expected 3, resolving symbol MasterSystemModule in /home/dell/Downloads/Adaani5.0.0/src/app/master-system/master-system.module.ts, resolving symbol MasterSystemModule in /home/dell/Downloads/Adaani5.0.0/src/app/master-system/master-system.module.ts at syntaxError (/home/dell/Downloads/Adaani5.0.0/node_modules/@angular/compiler/bundles/compiler.umd.js:1725:34) at simplifyInContext (/home/dell/Downloads/Adaani5.0.0/node_modules/@angular/compiler/bundles/compiler.umd.js:24949:23) at StaticReflector.simplify (/home/dell/Downloads/Adaani5.0.0/node_modules/@angular/compiler/bundles/compiler.umd.js:24961:13) at StaticReflector.annotations (/home/dell/Downloads/Adaani5.0.0/node_modules/@angular/compiler/bundles/compiler.umd.js:24391:41) at _getNgModuleMetadata (/home/dell/Downloads/Adaani5.0.0/node_modules/@angular/compiler-cli/src/ngtools_impl.js:138:31) at _extractLazyRoutesFromStaticModule (/home/dell/Downloads/Adaani5.0.0/node_modules/@angular/compiler-cli/src/ngtools_impl.js:109:26) at includeLazyRouteAndSubRoutes (/home/dell/Downloads/Adaani5.0.0/node_modules/@angular/compiler-cli/src/ngtools_impl.js:66:25) at Array.reduce () at Object.listLazyRoutesOfModule (/home/dell/Downloads/Adaani5.0.0/node_modules/@angular/compiler-cli/src/ngtools_impl.js:54:36) at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/home/dell/Downloads/Adaani5.0.0/node_modules/@angular/compiler-cli/src/ngtools_api.js:91:39) at AotPlugin._getLazyRoutesFromNgtools (/home/dell/Downloads/Adaani5.0.0/node_modules/@ngtools/webpack/src/plugin.js:240:66) at _donePromise.Promise.resolve.then.then.then.then.then (/home/dell/Downloads/Adaani5.0.0/node_modules/@ngtools/webpack/src/plugin.js:493:24) at at process._tickCallback (internal/process/next_tick.js:188:7)

Please check the valid version of primeng with that version of angular — Pardeep Jain
i have mentioned the package.json which has the versions. Does anything more is required for checking. Please check and let me know ..i alone am not capable to do tht — user9630712
Update all of your packages to make them match. When you run npm install you should see no errors, no warnings. Try using the last versions of the packages, and if you don't, be sure to fix the versions (~2.0.0 or ^2.0.0 should be 2.0.0) — user4676340

ForestG ForestG · Accepted Answer · 2018-04-25T07:59:50

my take is the following:

delete node_modules folder
run npm upgrade and npm update
if the problem still exists, try the steps 1-2 again, but this time with -g flag

+1: if you get any warnings about "update available", then do it what is described in the message

Error while implementing calendar from primeng in angular

1 Answers