title: Angular route.navigate not loading properly
body: <p>I'm building facebook login to my application but I am having trouble with programmatically redirecting to the app after they have logged in. </p>
  
  <p>My login code inside my AuthService is this</p>
  
  <pre><code>const provider = new firebase.auth.FacebookAuthProvider()
  return this.afAuth.auth.signInWithPopup(provider)
    .then((credential) =&gt; {
      this.authState = credential.user;
      this.router.navigate(['app','grade-tracking']);
    })
    .catch((error) =&gt; {
      console.log(error);
    })
  </code></pre>
  
  <p>the above code works fine and takes me to the desired page. However, the page looks really funning and it looks like the components and style files have not been loaded. This is my routes:</p>
  
  <pre><code>const appRoutes: Routes = [
    { path: '', redirectTo: '/app/grade-tracking', pathMatch: 'full' },
    {
        path: 'app', component: AppContainerComponent, children: [
           { path: 'grade-tracking', component: GradeTrackingComponent },
        ]
    },
    { path: 'login', component: LoginContainerComponent },
  ];
  </code></pre>
  
  <p>Is it possible that I am missing imports somewhere? Any help appreciated! Also, I noticed that if I refresh the page after it has redirected (meaning the same url) the page loads everything fine!</p>