我添加了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);
}
}
我最新添加了ng-idle和ng-idle/keepalive个包。
在运行ng serve之后，任何人都可以帮助解决此错误。
我收到此错误
模块/var/www/html/idi/client2/node_modules/@ng-idle/keepalive/index.d.ts的元数据版本不匹配错误，找到版本4，预期3，解析/ var /中的符号AppModule www / html / idi / client2 / src / app / app.module.ts，解析/var/www/html/idi/client2/src/app/app.module.ts中的符号AppModule，解析/ var /中的符号AppModule WWW / HTML / IDI /客户端2 / SRC /应用程序/ app.module.ts
答案 0 :(得分：6)
看起来作者通过查看元数据文件来构建带有Angular5 +的模块：
node_modules\@ng-idle\core\index.metadata.json
内容显示了Angular 5引入的元数据的第4版：
[{"__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
答案 1 :(得分：0)
这是您正在使用的库的已知问题，请参阅https://github.com/HackedByChinese/ng2-idle/issues/76。
此外，您永远不应该使用apache来托管应用程序的开发环境，使用ng build -prod生成构建并将dist文件夹内容复制到您的apache目录中。
答案 2 :(得分：0)
我确认只是降级到beta12
"@ng-idle/core": "^2.0.0-beta.12",
"@ng-idle/keepalive": "^2.0.0-beta.12"
，它为我工作。 我的开发环境解决方案是在Visual Studio Code
中答案 3 :(得分：0)
请注意，为了使其正常工作，我必须添加
"@ng-idle/core": "2.0.0-beta.12",
"@ng-idle/keepalive": "2.0.0-beta.12"
在我的package.json中，然后我跑了
npm install
请注意，版本固定为2.0.0-beta.12，因为^ （插入符号）不在版本号前面。
感谢@chrisDev-ec和@pixelbits指导我找到解决方案
现在，构建没有任何错误。我还不想更新到ng5，所以我发现这个解决方案非常方便。
答案 4 :(得分：0)
运行此命令为我解决了这个问题：
npm install @ ng-bootstrap / ng-bootstrap @ 1.0.0-beta.6 --save