Angular module/var/www/html/idi/client2/node_modules/@ng idle/keepalive/index.d.ts的元数据版本不匹配出错

我添加了

ng idle/keepalive

这是我的

package.json

文件

{
    "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.
    }
}

这是我的

app.component.ts

文件

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 => e instanceof NavigationEnd)
      .pairwise().subscribe((e) => {
        if (localStorage.getItem('accessToken')) {
          if (e && e[0] && e[0].url && e[1] && e[1].url && e[1].url === '/') {
            this.route.navigate([e[0].url]);
          }
        }
      });

    if (this.currentUrl) {
      if ((this.currentUrl.indexOf('changerecoverpassword') > -1) || (this.currentUrl.indexOf('forgotpassword') > -1) || (this.currentUrl.indexOf('verifycode') > -1) || (this.currentUrl.indexOf('verifysms') > -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(() => {
      if (this.route && 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(() => {
            $('#progressBar').value = 10 - --this.timeleft;
            this.ticks = this.timeleft;
            if (this.timeleft <= 0) {
              this.logout();
              clearInterval(this.downloadTimer);
            }
          }, 1000);
          setTimeout(() => {
            $('#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 && this.ticks >= 0) {
      setTimeout(() => {
        clearInterval(this.downloadTimer);
        $('#timeOutModal').modal('hide');
        this.ticks = 10;
      }, 200);
    }
  }

  // logout and redirect to login page
  logout() {
    this.reset();
    setTimeout(() => {
      $('#timeOutModal').modal('hide');
      this.config.clearLocalStorage();
      this.router.navigate(['/']);
    }, 200);
  }

}

从'@angular/core'导入{Component，ViewEncapsulation}；
从'@angular/Router'导入{Router，NavigationEnd}；
从'@angular/Http'导入{Http，Response，Headers}；
从“/app.config”导入{AppConfig}；
从'@ng Idle/core'导入{Idle，DEFAULT_INTERRUPTSOURCES}；
从'@ng idle/Keepalive'导入{Keepalive}；
导入“rxjs/add/operator/pairwise”；
导入'rxjs/add/operator/filter'；
声明var$：任何；
@组成部分({
选择器：“az根”，
封装：视图封装。无，
templateUrl:“./app.component.html”，
样式URL:['./app.component.scss']，
提供者：[AppConfig]
})
导出类AppComponent{
路由器：任何；
显示导航栏：任何；
loginToken:any=''；
currentUrl:any；
timedOut=false；
userInactivityTimeOut：任何；
蜱=10；
下载计时器：任意=“”；
时间限制：任何；
构造函数（路由器：路由器，公共路由：路由器，公共http:http，公共配置：AppConfig，私有空闲：空闲，私有保留：保留）{
this.router=路由器；
this.currentUrl=window.location.href；
this.currentUrl=this.currentUrl.split（'/'）；
this.loginToken=config.loginToken；
这是路由器事件
.filter（e=>e instanceof NavigationEnd）
.pairwise（）.subscribe（（e）=>{
if（localStorage.getItem（'accessToken'））{
如果（e&&e[0]&&e[0]。url&&e[1]&&e[1]。url&&e[1]。url==='/'））{
this.route.navigate（[e[0].url]）；
}
}
});
if（this.currentUrl）{
如果（（this.currentUrl.indexOf（'changerecoverpassword'）>-1）| |（this.currentUrl.indexOf（'forgotpassword'）>-1）| |（this.currentUrl.indexOf（'verifysms'）>-1）|{
返回；
}否则{
if（（this.loginToken==''）| |（this.loginToken===null））{
this.route.navigate（['/']）；
}
}
}
如果（this.route.url==='/'））{
this.showNavbar=false；
}否则{
this.showNavbar=true；
}
this.userInactivityTimeOut=config.userInactivityTimeOut；
//出于测试目的，设置5秒的空闲超时。
idle.setIdle（this.userInactivityTimeOut）；
//设置5秒的超时时间。10秒不活动后，用户将被视为超时。
idle.setTimeout（this.userInactivityTimeOut）；
//设置默认的中断，在本例中是单击、滚动、触摸文档等
设置中断（默认的中断源）；
idle.onTimeout.subscribe（（）=>{
if（this.route&&this.route.url）{
如果（（this.route.url=='/'））|（this.route.url=='/changerecoverpassword'）|（this.route.url=='/forgotpassword'）|（this.route.url==='/verifycode'）|（this.route.url==='/verifysms'））{
这是reset（）；
返回；
}否则{
这个时间长度=10；
this.downloadTimer=setInterval（（）=>{
$（“#progressBar”）.value=10----this.timeleft；
this.ticks=this.timeleft；
如果（this.timeleft{
$（'timeOutModal'）.modal（'show'）；
}, 200);
this.timedOut=true；
}
}
});
keepalive.interval（this.userInactivityTimeOut）；
这是reset（）；
}
//重置用户不活动的计时器
重置（）{
这个.idle.watch（）；
this.timedOut=false；
如果（this.ticks&&this.ticks>=0）{
设置超时（（）=>{
clearInterval（此为下载计时器）；
$（'timeOutModal'）.modal（'hide'）；
这个数字是10；
}, 200);
}
}
//注销并重定向到登录页面
注销（）{
这是reset（）；
设置超时（（）=>{
$（'timeOutModal'）.modal（'hide'）；
this.config.clearLocalStorage（）；
this.router.navigate（['/']）；
}, 200);
}
}

我添加了

ng idle

和

ng idle/keepalive

最新包

运行

ng SERVICE

后获得此信息，请任何人帮助解决此错误

我犯了这个错误

module/var/www/html/idi/client2/node_modules/@ng idle/keepalive/index.d.ts元数据版本不匹配错误，发现版本4，预期为3，在/var/www/html/idi/client2/src/app/app.module.ts中解析符号AppModule，在/var/www/html/idi/client2/src/app/app.module.ts中解析符号AppModule，在/var/www/html中解析符号AppModule/idi/client2/src/app/app.module.ts

---

看起来作者通过查看元数据文件，使用Angular5+构建了模块：

node_modules\@ng-idle\core\index.metadata.json

内容显示了元数据的第4版，第5版介绍了：

[{"__symbolic":"module","version":4,"metadata":...

Angular4位于元数据版本3上

您需要此库的早期版本。例如，在npm上查找使用版本3的版本

[更新]

我刚检查过。您应该安装@2.0.0-beta.12:

npm install @ng-idle/core@2.0.0-beta.12
npm install @ng-idle/keepalive@2.0.0-beta.12

---

这是您正在使用的库的已知问题，请参阅

---

此外，您永远不应该使用apache托管应用程序的开发环境，使用

ng build-prod

生成一个build并将

dist

文件夹内容复制到您的apache目录中。

   "@ng-idle/core": "^2.0.0-beta.12",
   "@ng-idle/keepalive": "^2.0.0-beta.12"

，它对我有用。

---

我的开发环境解决方案在Visual Studio代码中

请注意，为了使其工作，我必须添加

“@ng idle/core”：“2.0.0-beta.12”，

“@ng idle/keepalive”：“2.0.0-beta.12”

在我的package.json中，然后我运行

npm安装

请注意，版本已固定为2.0.0-beta.12，因为版本号前面没有插入符号

感谢并指导我找到解决方案

现在构建过程中没有任何错误。我不想更新到ng5，所以我发现这个解决方案