title: Angular2 router.navigate() not working first time
body: <p>I have the following routes defined:</p>
  
  <pre><code>export const routes: Routes = [
      { path: '', component: HomeComponent, pathMatch: 'full', canActivate: [AuthGuardService] },
      { path: 'sites', component: SiteIndexComponent, resolve: { siteSummaries: SiteSummariesResolve }, canActivate: [AuthGuardService] },
      { path: 'qa-tasks', component: QaTaskIndexComponent, resolve: { investigations: InvestigationsResolve, reviews: ReviewsResolve }, canActivate: [AuthGuardService] },
      { path: 'error', component: ErrorComponent },
      { path: '**', redirectTo: '' }
  ];
  </code></pre>
  
  <p>Users of my app see totally different pages based on their role including their "landing" (home) page.  I'm using my HomeComponent to route the user to the correct landing page based on role like this:</p>
  
  <pre><code>export class HomeComponent implements OnInit {
  
      private roles: any;
  
      constructor(private router: Router,
          private authService: AuthService) { }
  
      ngOnInit() {
          var currentUser = this.authService.getCurrentUser();
          this.roles = currentUser.roles;
          this.redirect();
      }
  
      private redirect() {
          var route;
          if (this.inRole('site-user-role')) {
              route = 'sites';
          }
          else if (this.inRole('qa-user-role')) {
              route = 'qa-tasks';
          }
          if (route) {
              this.router.navigate([route]);
          }
          else {
              this.router.navigate(['error']);
          }
      }
  
      private inRole(role) {
          return _.includes(this.roles, role);
      }
  }
  </code></pre>
  
  <p>When the <code>HomeComponent</code> is first loaded after login, the route does not navigate to, for example, the 'sites' route, but strangely it resolves the siteSummaries dependency.  After the first time it fails to redirect, I can navigate to another route and then try to navigate to the '' route and it correctly redirects to the 'sites' route.</p>
  
  <p>Why is the initial navigation not working?  Based on other similar questions about navigate() not working, I've tried changing my route to '/sites' and './sites', but to no avail.</p>
  
  <p><strong>Update</strong> 
  It looks like it has to do with resolving a dependency for a route.  If redirect to the 'error' route in my <code>redirect()</code> function, it does it successfully the first time.  If I add a <code>resolve</code> to my 'error' route, it fails to navigate to it the first time.  The odd thing is it makes the HTTP call to fulfill the dependency.  Is this an issue with it not awaiting the return of <code>navigate()</code>'s promise?</p>
  
  <p><strong>Update 2</strong>
  Here are the requested classes:</p>
  
  <pre><code>export class SiteIndexComponent implements OnInit {
  
      public siteSummaries: any;
      public totalRegisteredCount: number;
      public totalscreenFailedCount: number;
      public totalinProgressCount: number;
  
      constructor(private route: ActivatedRoute) { }
  
      ngOnInit() {
          this.siteSummaries = this.route.snapshot.data['siteSummaries'];
          this.totalRegisteredCount = this.getTotal('registeredCount');
          this.totalscreenFailedCount = this.getTotal('screenFailedCount');
          this.totalinProgressCount = this.getTotal('inProgressCount');
      }
  
      private getTotal(prop): number {
          var total = 0;
          _.forEach(this.siteSummaries, function (summary) {
              return total += summary[prop];
          });
          return total;
      }
  }
  
  @Injectable()
  export class SiteSummariesResolve implements Resolve&lt;any&gt; {
  
      constructor(private sitesService: SitesService) { }
  
      resolve(route: ActivatedRouteSnapshot) {
          return this.sitesService.getSiteSummaries();
      }
  }
  
  getCurrentUser(): any {
      var currentUser = sessionStorage.getItem('currentUser');
      if (!currentUser) {
          return null;
      }
      return JSON.parse(currentUser);
  }
  </code></pre>
  
  <p><strong>Update 3</strong>
  I threw this into my <code>app.component</code>:</p>
  
  <pre><code>private navigationInterceptor(event: RouterEvent): void {
      if (event instanceof NavigationStart) {
          console.log('started: ' + JSON.stringify(event));
      }
      if (event instanceof NavigationEnd) {
          console.log('ended: ' + JSON.stringify(event));
      }
      if (event instanceof NavigationCancel) {
          console.log('cancelled:' + JSON.stringify(event));
      }
      if (event instanceof NavigationError) {
          console.log('error:' + JSON.stringify(event));
      }
  }
  </code></pre>
  
  <p>On the times when it fails to load the route (the first time), there is first an event instance of NavigationStart and then an instance of NavigationCancel.  Here is what event looks like on the NavigationCancel:  <code>{"id":2,"url":"/sites","reason":""}</code>.  As you can see, no reason is given...</p>