In our angular application we use angular-oauth2-oidc for authenication (implicitFlow).
app.component.html:
<dt-menu></dt-menu>
<dt-header></dt-header>
<div class="content">
<router-outlet></router-outlet>
</div>
app-routing.module.ts:
{ path: '', redirectTo: '/rooster', pathMatch: 'full' }, // default route
{ path: 'oauth', component: AuthResponseComponent },
{
matcher: roosterRouteMatcher,
component: RoosterComponent,
canActivate: [AuthGuard],
data: { subtitle: 'Rooster' }
},
{ path: '**', component: PageNotFoundComponent }
For authentication we redirect to an external page/server. (login works).
The problem: 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.
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)
I'm looking for a way to do a redirect to the login page before dt-menu + dt-headers are drawn.
What I have tried: 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.
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.
