TLDR; I have a "spinner" HTML element in my index.html, and I want to show it until the @angular/router resolve() has been resolved, how to achieve that?
More details:
When not using router and resolves, I can achieve what i expect just doing this:
index.html:
<html>
<head>...</head>
<body>
<app-base>
<div class="spinner">Loading...</div>
</app-base>
</body>
What happens here: a spinner is showing until Angular2 application bootstraps, and replaces the content of <app-base>. Everything works wonders.
With @angular/router:
index.html:
<html>
<head>...</head>
<body>
<app-base>
<div class="spinner">Loading...</div>
</app-base>
</body>
app.component.ts: (code is exactly the same as suggested here, setting this.loading)
@Component({
selector: 'app-base',
template: `
<div class="spinner" *ngIf="loading">Loading...</div>
<router-outlet></router-outlet>
`,
})
routing.ts:
export const routes: Routes = [
{
path: '',
component: HomeComponent,
resolve: { package: HomeResolver }
},
];
What happens here: a spinner is shown until Angular2 bootstraps, then it gets replaced by an analogous spinner, managed by Angular DOM (but rebooting spin animation, as the DOM is modified), then the HomeComponent kicks in when the HomeResolver is.. resolved.
This is sub-par experience, as the spinner resets at application bootstrap, but before the route resolve is done.
