title: CanDeactivateGuard doesn't work when refresh the page
body: <p>I am using Angular 5 ad have Implemented a CanDeactivateGuard for a component to pop up a modal if there are some unsaved changes:</p>
  
  <pre><code>export interface CanComponentDeactivate {
    canDeactivate: (nextStateUrl: string) =&gt; Observable&lt;boolean&gt; | boolean;
  }
  
  @Injectable()
  export class CanDeactivateGuard implements CanDeactivate&lt;CanComponentDeactivate&gt; {
  
    canDeactivate(
      component: CanComponentDeactivate,
      currentRoute: ActivatedRouteSnapshot,
      currentState: RouterStateSnapshot,
      nextState?: RouterStateSnapshot): Observable&lt;boolean&gt; | Promise&lt;boolean&gt; | boolean {
      return component &amp;&amp; component.canDeactivate
        ? component.canDeactivate(nextState.url)
        : true;
    }
  }
  </code></pre>
  
  <p>I have added this guard to page2 and it works perfectly if I navigate from page 1 to page2 and make some changes and try to navigate away.
  However, if I stay in page2 and refresh the page and then make some changes, and try to navigate away, the canDeactivate method in the guard will be called, but the component value is null, so it returns true without showing the confirmation modal. Or if I navigate from page2 to another page which is not loaded yet. Note that all pages are lazyloaded and each page has its route module. </p>
  
  <p>I have added the guard to page2 module the same way done here:
  <a href="http://plnkr.co/edit/z2OqgTXTiPpTgXcmNiDM?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/z2OqgTXTiPpTgXcmNiDM?p=preview</a></p>
  
  <p>I also tried to add the guard to main guard, but didn't work either. </p>
  
  <p>Is there any reason when I refresh the component is null but when I navigate from other pages to page 2, the component is not in the guard.</p>
  
  <p>Is here any fix for it?</p>
  
  <p>Thanks</p>