One issue arises when the server attempts to render client elements, which is not feasible. To address this problem, you need to instruct the server not to render these specific parts.
One way to achieve this is by using PLATFORM_ID from Angular core. By utilizing an if statement such as "don't do this on the server", you can prevent server-side rendering.
For instance, consider creating a custom auto logout feature with the use of addlistener. In the provided example, the process begins in ngoninit with If(isPlattformBrowser), ensuring that it operates exclusively on the browser and not the server. Similarly, when implementing Idle, ensure the action triggers within the if(isPlattformBrowser) condition.
To implement this functionality, create a component following the example provided and include your auto-logout component in the app.component.html file as shown below:
<router-outlet name="header"></router-outlet>
<router-outlet></router-outlet>
<app-auto-logout></app-auto-logout>
(replace "your component" with the actual name of your component) This setup ensures that the auto-logout feature is activated across all components. Since app.component loads first and subsequent components load within it, any actions defined in app.component will be applied universally.
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;
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 registered');
}
this.setTimeout();
}
this.countdown=15;
}
setTimeout() {
this.warnTimeout = setTimeout(this.warn, 600000);
this.resetTimeout();
}
// Additional functions omitted for brevity
}