title: Angular 4/5 redirect for authentication before component load
body: <p>In our angular application we use angular-oauth2-oidc for authenication (implicitFlow). </p>
  
  <p>app.component.html:</p>
  
  <pre><code>&lt;dt-menu&gt;&lt;/dt-menu&gt;
  &lt;dt-header&gt;&lt;/dt-header&gt;
  &lt;div class="content"&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>app-routing.module.ts:</p>
  
  <pre><code>{ path: '', redirectTo: '/rooster', pathMatch: 'full' }, // default route
  { path: 'oauth', component: AuthResponseComponent },
  {
       matcher: roosterRouteMatcher,
       component: RoosterComponent,
       canActivate: [AuthGuard],
       data: { subtitle: 'Rooster' }
    },
    { path: '**', component: PageNotFoundComponent }
  </code></pre>
  
  <p>For authentication we redirect to an external page/server. (login works).</p>
  
  <p><strong>The problem</strong>:
  When a user navigates to our application (s)he is not logged in and as such is redirected to the login page. What this means is that dt-menu and dt-header are drawn on the screen, a redirect happens, (user logs in), dt-menu and dt-header are drawn on the screen, the main component (rooster) is drawn.</p>
  
  <p>This means that the user (with slower network speed) sees what looks like a flashing website (dt-menu + dt-headers -> login page -> dt-menu + dt-headers + dt-rooster)</p>
  
  <p>I'm looking for a way to do a redirect to the login page before dt-menu + dt-headers are drawn. </p>
  
  <p><strong>What I have tried</strong>:
  I have tried to do a login (via angular-oauth2-oidc->initImplicitFlow) directly from the constructor of AppModule (app.module.ts), but inside initImplicitFlow Promises are used which means that dt-menu + dt-header will also be drawn before the redirect to the login page happens.</p>
  
  <p>I also tried to add a component-less path (that has the canActive guard) with all of the other routes as its children. But with the same result.</p>