ng2-idle服务器预呈现问题 - ReferenceError:未定义文档

时间:2017-12-13 19:58:01

标签: javascript angular typescript ng2-idle

如何在Angular 4中使用预渲染使空闲超时/保持活动的ng2-idle工作。我按照以下链接进行实现

https://hackedbychinese.github.io/ng2-idle/

没有服务器预渲染它工作正常,但是当我将渲染添加回index.html时,我一直收到以下错误

异常:调用节点模块失败并显示错误:由于错误导致预渲染失败:ReferenceError:未在新DocumentInterruptSource中定义文档

ng2-idle是否适用于预渲染?是否有解决方法或任何其他方法来实现空闲超时警告并保持ping到Web服务器?

如果您想查看任何代码,请告诉我。它与链接完全相同,无需预渲染即可工作。

感谢您的时间

1 个答案:

答案 0 :(得分:0)

这不起作用,因为服务器尝试在服务器上呈现客户端元素。这行不通。您必须告诉服务器他没有通过服务器渲染这些零件。

为此PLATFORM_ID来自Angular cor。有了这个,您可以使用if来说“ 不要在服务器上执行此操作” ...

我的示例..我使用addlistener创建了自己的自动注销。您可以看到我以If(isPlattformBrowser)在ngoninit中启动零件,这意味着仅在浏览器上而不在服务器上。使用空闲功能,您必须在if(isPlattformBrowser)

中编写要开始空闲的部分

创建一个组件并编写以下示例并添加 将您的组件自动注销添加到app.component.html中,例如

<router-outlet name="header"></router-outlet>
<router-outlet></router-outlet>

<app-auto-logout></app-auto-logout>

(您组件的名称)以激活自动注销每个组件。首先加载app.component并在应用程序组件上加载其他Coponent负载, 这样您在app.component中制作的内容就可以在每个组件中使用。

import {Component, ElementRef, Inject, OnInit, ViewChild} from '@angular/core';
import {AuthService} from '../../../../services/auth.service';


import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
declare var $:any;
@Component({
  selector: 'app-auto-logout',
  templateUrl: './auto-logout.component.html',
  styleUrls: ['./auto-logout.component.scss']
})
export class AutoLogoutComponent implements OnInit {

  warnTimeout: any;
  logoutTimeout: number;
  // warn: number;
  // logout
  setState: string;
  events = [
    "load",
    "mousemove",
    "mousedown",
    "click",
    "scroll",
    "keypress"
  ];
  countdown: any;
  interval: any;
  // interval: number;
  // @ViewChild('autologoutModal') nameField2: ElementRef;
  constructor( private authService: AuthService,
               @Inject(PLATFORM_ID) private platformId: Object) {


  }
  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
    this.warn = this.warn.bind(this);
    this.logout = this.logout.bind(this);
    this.resetTimeout = this.resetTimeout.bind(this);

      for (var i in this.events) {
        window.addEventListener(this.events[i], this.resetTimeout);
        console.log('Event regriestriert');
      }

    this.setTimeout();
    }
    this.countdown=15;
  }
  setTimeout() {
    // this.warnTimeout = setTimeout(this.warn, 16 * 1000);

    //wenn eine Minute keine Aktivität regristriert wird, wird di Warnung ausgelöst und in 15 Sekunden ausgeloggt
    this.warnTimeout = setTimeout(this.warn, 600000);
    // this.logoutTimeout = setTimeout(this.logout, 17);
  }

  resetTimeout() {
    this.clearTimeout();
    this.setTimeout();
    // console.log('Im reset timeout');
  }
  warn() {
    // alert("You will be logged out automatically in 1 minute.");
    //intervall runterzählen bis zum tatsächlichen Logout
    this.interval = setInterval(() => {
      console.log(this.countdown);
      this.countdown--;
      //Warnung
      if (isPlatformBrowser(this.platformId)) {
        $('#autologoutModal').modal('show');
      }
      if (this.countdown=== 0 ) {
        // code here will run when the counter reaches zero.
        clearInterval(this.interval);
        console.log('Ding!');
        this.cancelsession();
      }
    }, 1000);// ein sekunde abstände wert von countdown ändern bzw. runterzählen

    // this.logoutTimeout = setTimeout(this.logout, this.countdown);
  }

  logout() {
    // Send a logout request to the API
    console.log("Sending a logout request to the API...");
    // this.setState({ logginStatus: false });
    // this.destroy(); // Cleanup
  }
  destroy() {
    this.clearTimeout();

    for (var i in this.events) {
      window.removeEventListener(this.events[i], this.resetTimeout);
    }
  }
  //clear timeout and intervall, set countdown to initial value
  clearTimeout() {
    if (this.warnTimeout){ clearTimeout(this.warnTimeout), clearInterval(this.interval), this.countdown=15;}
    if (this.logoutTimeout) clearTimeout(this.logoutTimeout);
  }
  countdownzahler() {
    this.countdown--;
  }
  cancelsession(){

    this.authService.logout().subscribe(data=>{
      window.location.href = window.location.href.replace(window.location.pathname, '') + `/d/start/redirect?page=receiving&country=AT&dealer=`;
    console.log('Ausloggen');
    });
  }
}