title: ERROR in Metadata version mismatch for module /var/www/html/idi/client2/node_modules/@ng-idle/keepalive/index.d.ts
body: <p>i have added <code>ng-idle/keepalive</code>.</p>
  
  <p>this is my <code>package.json</code> file</p>
  
  <pre><code>{
      "name": "azimuth",
      "version": "1.1.0",
      "license": "MIT",
      "scripts": {
          "ng": "ng",
          "start": "ng serve",
          "build": "ng build",
          "test": "ng test",
          "lint": "ng lint",
          "e2e": "ng e2e",
          "install": "napa"
      },
      "private": true,
      "dependencies": {
          "@angular/animations": "4.3.3",
          "@angular/common": "4.3.1",
          "@angular/compiler": "4.3.1",
          "@angular/core": "4.3.1",
          "@angular/forms": "4.3.1",
          "@angular/platform-browser": "4.3.1",
          "@angular/platform-browser-dynamic": "4.3.1",
          "@angular/router": "4.3.1",
          "@ng-idle/core": "^2.0.0-beta.13",
          "@ng-idle/keepalive": "^2.0.0-beta.13",
          "angular2-datatable": "0.6.0",
          "angular2-froala-wysiwyg": "2.5.1-2",
          "angular2-google-maps": "0.17.0",
          "angular2-google-place": "^2.0.2",
          "angular2-moment": "^1.7.0",
          "angular2-text-mask": "^8.0.3",
          "awesome-bootstrap-checkbox": "1.0.0-alpha.4",
          "bootstrap": "4.0.0-alpha.6",
          "chart.js": "2.5.0",
          "core-js": "2.4.1",
          "d3": "3.5.17",
          "datamaps": "0.5.8",
          "dropzone": "4.3.0",
          "font-awesome": "4.7.0",
          "fullcalendar": "3.2.0",
          "jquery": "3.1.1",
          "jquery-knob": "1.2.11",
          "jquery-slimscroll": "1.3.8",
          "jquery-ui-dist": "1.12.1",
          "jqwidgets-framework": "^4.6.4",
          "leaflet-map": "0.2.1",
          "mdn-polyfills": "^5.4.0",
          "metrojs": "0.9.77",
          "moment": "2.17.1",
          "ng2-charts": "1.5.0",
          "ngx-toastr": "^5.3.1",
          "primeng": "^4.0.0-rc.3",
          "rxjs": "5.2.0",
          "skycons": "^1.0.0",
          "socicon": "3.0.4",
          "tether": "1.4.0",
          "text-mask-addons": "^3.6.0",
          "topojson": "2.2.0",
          "ts-helpers": "1.1.1",
          "widgster": "0.0.3",
          "zone.js": "0.8.5"
      },
      "napa": {
          "pace": "https://github.com/HubSpot/pace.git#v0.7.1",
          "skycons": "https://github.com/darkskyapp/skycons.git#7095ecf5f653dbcadbddb0d317b42e65fe091eae"
      },
      "devDependencies": {
          "@angular/cli": "1.2.6",
          "@angular/compiler-cli": "4.3.1",
          "@types/core-js": "0.9.41",
          "@types/jasmine": "2.5.47",
          "@types/jquery": "2.0.41",
          "@types/jquery.slimscroll": "1.3.30",
          "@types/node": "7.0.12",
          "codelyzer": "2.0.1",
          "jasmine-core": "2.5.2",
          "jasmine-spec-reporter": "3.2.0",
          "karma": "1.4.1",
          "karma-chrome-launcher": "2.0.0",
          "karma-cli": "1.0.1",
          "karma-coverage-istanbul-reporter": "0.2.0",
          "karma-jasmine": "1.1.0",
          "karma-jasmine-html-reporter": "0.2.2",
          "napa": "2.3.0",
          "protractor": "5.1.1",
          "sass-to-js": "1.3.0",
          "script-loader": "^0.7.2",
          "ts-node": "3.0.2",
          "tslint": "5.0.0",
          "typescript": "2.2.
      }
  }
  </code></pre>
  
  <p>and this is my <code>app.component.ts</code> file </p>
  
  <pre><code>import { Component, ViewEncapsulation } from '@angular/core';
  import { Router, NavigationEnd } from '@angular/router';
  import { Http, Response, Headers } from '@angular/http';
  import { AppConfig } from "./app.config";
  import { Idle, DEFAULT_INTERRUPTSOURCES } from '@ng-idle/core';
  import { Keepalive } from '@ng-idle/keepalive';
  import 'rxjs/add/operator/pairwise';
  import 'rxjs/add/operator/filter';
  
  declare var $: any;
  
  @Component({
    selector: 'az-root',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    providers: [AppConfig]
  })
  
  export class AppComponent {
    router: any;
    showNavbar: any;
    loginToken: any = '';
    currentUrl: any;
    timedOut = false;
    userInactivityTimeOut: any;
    ticks = 10;
    downloadTimer: any = '';
    timeleft: any;
  
    constructor(router: Router, public route: Router, public http: Http, public config: AppConfig, private idle: Idle, private keepalive: Keepalive) {
      this.router = router;
      this.currentUrl = window.location.href;
      this.currentUrl = this.currentUrl.split('/');
      this.loginToken = config.loginToken;
      this.router.events
        .filter(e =&gt; e instanceof NavigationEnd)
        .pairwise().subscribe((e) =&gt; {
          if (localStorage.getItem('accessToken')) {
            if (e &amp;&amp; e[0] &amp;&amp; e[0].url &amp;&amp; e[1] &amp;&amp; e[1].url &amp;&amp; e[1].url === '/') {
              this.route.navigate([e[0].url]);
            }
          }
        });
  
      if (this.currentUrl) {
        if ((this.currentUrl.indexOf('changerecoverpassword') &gt; -1) || (this.currentUrl.indexOf('forgotpassword') &gt; -1) || (this.currentUrl.indexOf('verifycode') &gt; -1) || (this.currentUrl.indexOf('verifysms') &gt; -1)) {
          return;
        } else {
          if ((this.loginToken === '') || (this.loginToken === null)) {
            this.route.navigate(['/']);
          }
        }
      }
      if (this.route.url === '/') {
        this.showNavbar = false;
      } else {
        this.showNavbar = true;
      }
  
      this.userInactivityTimeOut = config.userInactivityTimeOut;
  
      // sets an idle timeout of 5 seconds, for testing purposes.
      idle.setIdle(this.userInactivityTimeOut);
      // sets a timeout period of 5 seconds. after 10 seconds of inactivity, the user will be considered timed out.
      idle.setTimeout(this.userInactivityTimeOut);
      // sets the default interrupts, in this case, things like clicks, scrolls, touches to the document
      idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
  
      idle.onTimeout.subscribe(() =&gt; {
        if (this.route &amp;&amp; this.route.url) {
          if ((this.route.url === '/') || (this.route.url === '/changerecoverpassword') || (this.route.url === '/forgotpassword') || (this.route.url === '/verifycode') || (this.route.url === '/verifysms')) {
            this.reset();
            return;
          } else {
            this.timeleft = 10;
            this.downloadTimer = setInterval(() =&gt; {
              $('#progressBar').value = 10 - --this.timeleft;
              this.ticks = this.timeleft;
              if (this.timeleft &lt;= 0) {
                this.logout();
                clearInterval(this.downloadTimer);
              }
            }, 1000);
            setTimeout(() =&gt; {
              $('#timeOutModal').modal('show');
            }, 200);
            this.timedOut = true;
          }
        }
      });
  
      keepalive.interval(this.userInactivityTimeOut);
  
      this.reset();
  
    }
  
    // reset timer for user inactivity
    reset() {
      this.idle.watch();
      this.timedOut = false;
      if (this.ticks &amp;&amp; this.ticks &gt;= 0) {
        setTimeout(() =&gt; {
          clearInterval(this.downloadTimer);
          $('#timeOutModal').modal('hide');
          this.ticks = 10;
        }, 200);
      }
    }
  
    // logout and redirect to login page
    logout() {
      this.reset();
      setTimeout(() =&gt; {
        $('#timeOutModal').modal('hide');
        this.config.clearLocalStorage();
        this.router.navigate(['/']);
      }, 200);
    }
  
  }
  </code></pre>
  
  <p>I have added <code>ng-idle</code> and <code>ng-idle/keepalive</code> package latest.</p>
  
  <p>its getting after running <code>ng serve</code> can any one please help to solve this error.</p>
  
  <p>i'am getting this error</p>
  
  <blockquote>
    <p>ERROR in Metadata version mismatch for module /var/www/html/idi/client2/node_modules/@ng-idle/keepalive/index.d.ts, found version 4, expected 3, resolving symbol AppModule in /var/www/html/idi/client2/src/app/app.module.ts, resolving symbol AppModule in /var/www/html/idi/client2/src/app/app.module.ts, resolving symbol AppModule in /var/www/html/idi/client2/src/app/app.module.ts</p>
  </blockquote>