模块 /var/www/html/idi/client2/node_modules/@ng-idle/keepalive/index.d.ts 的元数据版本不匹配错误
ERROR in Metadata version mismatch for 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);
}
}
我添加了最新的 ng-idle 和 ng-idle/keepalive 包。
它在 运行 ng serve 之后出现，任何人都可以帮助解决这个错误。
我遇到了这个错误
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
通过查看元数据文件，作者似乎使用 Angular5+ 构建了模块：
node_modules\@ng-idle\core\index.metadata.json
内容显示版本 4 的元数据，其中 Angular 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
这是您正在使用的库的一个已知问题，请参阅 https://github.com/HackedByChinese/ng2-idle/issues/76。
此外，您永远不应该使用 apache 来托管应用程序的开发环境，使用 ng build -prod 生成构建并将 dist 文件夹内容复制到您的 apache 目录中。
我确认刚刚降级到 beta12
"@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 install
请注意，版本固定为 2.0.0-beta.12，因为版本号前面没有 ^ （插入符号）。
感谢@chrisDev-ec and @pixelbits指导我找到解决方案
现在构建过程没有任何错误。我还不想更新到 ng5，所以我发现这个解决方案非常方便。
而不是 "@ng-idle/core": "^2.0.0-beta.12" 这将拉取最新版本
目前 13，请确保你有 "@ng-idle/core": "2.0.0-beta.12"（没有插入符号），这将强制它拉下版本 12.
运行 这个命令为我解决了这个问题：
npm install @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 --save
我已经添加了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 之后出现，任何人都可以帮助解决这个错误。
我遇到了这个错误
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
通过查看元数据文件，作者似乎使用 Angular5+ 构建了模块：
node_modules\@ng-idle\core\index.metadata.json
内容显示版本 4 的元数据，其中 Angular 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
这是您正在使用的库的一个已知问题，请参阅 https://github.com/HackedByChinese/ng2-idle/issues/76。
此外，您永远不应该使用 apache 来托管应用程序的开发环境，使用 ng build -prod 生成构建并将 dist 文件夹内容复制到您的 apache 目录中。
我确认刚刚降级到 beta12
"@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 install
请注意，版本固定为 2.0.0-beta.12，因为版本号前面没有 ^ （插入符号）。
感谢@chrisDev-ec and @pixelbits指导我找到解决方案
现在构建过程没有任何错误。我还不想更新到 ng5，所以我发现这个解决方案非常方便。
而不是 "@ng-idle/core": "^2.0.0-beta.12" 这将拉取最新版本 目前 13，请确保你有 "@ng-idle/core": "2.0.0-beta.12"（没有插入符号），这将强制它拉下版本 12.
运行 这个命令为我解决了这个问题：
npm install @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 --save