ng2-idle 服务器预渲染问题 - ReferenceError: document is not defined

Question

如何使 ng2-idle 空闲超时/keepalive 与 Angular 4 中的预渲染一起工作。我按照以下链接进行实施

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

在没有服务器预渲染的情况下可以正常工作，但是当我将渲染添加回我的 index.html 时，我不断收到以下错误

异常：调用节点模块失败并出现错误：预渲染因错误而失败：ReferenceError：文档未在新 DocumentInterruptSource 中定义

ng2-idle 是否适用于预渲染？是否有解决方法或任何替代方法来实现空闲超时警告并保持对网络服务器的有效 ping？

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

感谢您的宝贵时间

Answer 1

这不起作用，因为服务器尝试在服务器上呈现客户端元素。这行不通。你必须告诉服务器他不是由服务器渲染这部分的。

对于来自 Angular cor 的 PLATFORM_ID。有了这个，您可以使用 if 来表示“不要在服务器上执行此操作”...

我的例子.. 我用addlistener 创建了一个自己的自动注销。您可以看到我在 ngoninit 中以 If(isPlattformBrowser) 开始该部分，这意味着仅在浏览器上而非服务器上。对于 Idle，您必须在此 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');
    });
  }
}