Why don't lifecycle hooks run when changing tabs in my app?

user_9015111 0
Viewed 1345

I posted this question on the Angular github repo but was told that what I am asking is neither a bug nor a new feature. They recommended I post this question here.

Our Angular application uses a router with a canActivate guard. When the user adds a new tab on the browser and then tabs back to the page where the application is loaded, no lifecycle hooks run. Furthermore, the router guard is not run at all. To get around this problem, we have used the following JS and running in our index.html. How can we implement this in typescript and be more compatible with Angular 4? Furthermore, this also requires us to reload the page:

==> JS

var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { 
    hidden = "hidden";
    visibilityChange = "visibilitychange";
}

function handleVisibilityChange() {
    if (!document[hidden]) {
        var initialPage = window.location.pathname;
        window.location.replace(initialPage);
    }
}

document.addEventListener(visibilityChange, handleVisibilityChange, false);
angular javascript
2 Answers

In your App component add a focus event and look out for the change

@HostListener('window:focus', ['$event'])
onFocus(event: any): void {
}
user_89460120
Related