Consider the following array of routes:
const appRoutes: Routes = [
{ path: 'dashboard',
loadChildren: 'app/modules/dashboard/dashboard.module#DashboardModule',
canActivate: [AccessManagerGuard],
canLoad: [AccessManagerGuard]
},
//...
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: '**', redirectTo: '/dashboard', pathMatch: 'full' }
];
Notice that the path dashboard
has and the canLoad
property.
The service AccessManagerGuard
makes a call to an external webservice, which in turn takes a long time to answer (the script is not optimized, I'm just using it for example) :
canLoad(route: Route): Observable<boolean>|Promise<boolean>|boolean {
return this.http.get('https://...').map(response => {
return true;
});
}
The application is initialized with the component AppComponent
, set as default in Angular, which in turn has the following HTML:
<div>A verificar permissões. Aguarde...</div>
<router-outlet></router-outlet>
If in the url you type localhost:4200/dashborad
nothing will appear until the canLoad
is resolved and the HTML of the dashboard
component is loaded into router-outlet
.
The parent component AppComponent
does not have any (canLoad / canActivate) constraint.
Is it possible for the HTML of app.component.html
to appear before the canLoad
of the dashboard
route is resolved?