ng2-idle server pre rendering issue - ReferenceError: document is not defined

Question

How do I make ng2-idle for idle timeout/keepalive work with pre-rendering in Angular 4. I followed the following link for implementation

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

It works fine without server pre-rendering but I keep getting the following error when I add the rendering back to my index.html

Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: document is not defined at new DocumentInterruptSource

Does ng2-idle works with pre-rendering ? Is there a workaround or any alternate way to implement idle timeout warning and keep alive ping to the webserver?

Let me know if you want to see any code. Its exactly the same as in the link and it works without pre-rendering.

Thanks for your time

Same issue: https://stackoverflow.com/questions/39085632/localstorage-is-not-defined-angular-universal You need to check if it's browser or server. — AT82, Dec 14 '17 at 06:49

score 0 · Answer 1 · edited Jun 25 '19 at 10:32

This doesn't work, because the server try to render client elements on the server. This cant work. You have to tell the server that he doesn't render this parts by the server.

For this PLATFORM_ID from Angular cor. With this you can use a if to say "don't do this on the server"...

My example.. i create a own auto logout with addlistener. You can See that i start the part in ngoninit with If(isPlattformBrowser) that means only on browser not server. With Idle you must write the part to start idle in this if(isPlattformBrowser)

Create a component and write the following example and add add your component auto-logout into app.component.html like

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

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

(the name from youre component) to activate the auto Logout every component. app.component Load at first and other Coponent Load on app component, so that what you make in app.component work in every 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');
    });
  }
}

pls rewrite this anwser, some sentences are difficult to understand — Perazim, Jun 25 '19 at 08:58

ng2-idle server pre rendering issue - ReferenceError: document is not defined

1 Answers1