title: Router navigate redirect after authentication does not render component
body: <p>I want to redirect to my home component after authentication. The redirection is successful, but the home component does not render. If I move this.router.navigate outside the subscribe block, it will render properly.</p>
  
  <pre><code>export class LoginComponent implements AfterViewInit {
      constructor(private router: Router,
                  private authService: AuthenticationService) {
  
          this.authService.authenticationStream().subscribe(isAuthenticated =&gt; {
              if (isAuthenticated) {
                  this.router.navigate(['/home']);
              }
          });
      }
  }
  </code></pre>
  
  <p>In chrome dev tools, I can see all of the home component's template except for a ngFor block:</p>
  
  <pre><code>&lt;md-grid-tile *ngFor="let tile of CONFIG.tiles"&gt;
      {{ tile }}
  &lt;/md-grid-tile&gt;
  </code></pre>
  
  <p>I can verify CONFIG.tiles is populated.</p>
  
  <p>Why would the ngFor block not be rendered after navigation, specfically from a navigate call inside of an Observable subscription?</p>
  
  <p>EDIT: Adding AuthenticationService code:</p>
  
  <pre><code>export class AuthenticationService {
      constructor(private http: HttpService,
                private store: Store&lt;AppStore&gt;) {
      }
  
      authenticate(): void {
          let uri = 'http://uri.com'
          this.http.post(uri).subscribe(() =&gt; {
              // Dispatch event to ngrx store if user is successfully authenticated
              this.store.dispatch({type: AUTHENTICATED});
          });
      }
  
      authenticationStream(): Observable&lt;boolean&gt; {
          // Emits events from dispatch calls
          return &lt;Observable&lt;boolean&gt;&gt; this.store.select(AUTHENTICATION);
      }
  }
  </code></pre>