title: Why don't lifecycle hooks run when changing tabs in my app?
body: <p>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.</p>
  
  <p>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:</p>
  
  <p>==> JS</p>
  
  <pre><code>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);
  </code></pre>