title: Is there a way to display a loading screen while waiting for an Angular 2 route to resolve?
body: <p>I am using a <code>Resolve</code> interface to ensure a model is loaded before a component is displayed:</p>
  <p>routes:</p>
  <pre><code>const APP_ROUTES: Routes = [
    {
      path: '',
      component: AppComponent,
      children: [
        {
          path: '',
          component: PlatformComponent,
          canActivate: [AuthenticationGuard],
          resolve: {
            account: AccountResolver,
          },
  </code></pre>
  <p>resolve:</p>
  <pre><code>@Injectable()
  export class AccountResolver implements Resolve&lt;Account&gt; {
  
    constructor(private userService: UserService) { }
  
    resolve() {
      return this.userService.getAccount().first();
    }
  }
  </code></pre>
  <p>app-component:</p>
  <pre><code>@Component({
    selector: 'app-root',
    template: `
      &lt;shared-spinner&gt;&lt;/shared-spinner&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  `,
  })
  export class AppComponent implements OnInit {
  </code></pre>
  <p>The <code>&lt;shared-spinner&gt;</code> component selector displays a loading spinner. Is there way to tell it to only render when no child component has yet rendered in the <code>&lt;router-outlet&gt;</code>? Or, is there another way to do this?</p>
  <h3>Edit:</h3>
  <p>The solution:</p>
  <pre><code>@Component({
    selector: 'app-root',
    template: `&lt;router-outlet&gt;&lt;shared-spinner *ngIf=&quot;!initialized&quot;&gt;&lt;/shared-spinner&gt;&lt;/router-outlet&gt;`,
  })
  export class AppComponent implements OnInit {
  
    private initialized = false;
  
    constructor(private userService: UserService) { }
  
    ngOnInit() {
      
      this.userService.getAccount().subscribe(account =&gt; {
          if (this.initialized) {
            return;
          }
      
          if (!account) {
            return;
          }
        
          this.initialized = true;
        }
      );
    }
  }
  </code></pre>
  <p>In this manner it is quite tightly coupled to the functionality of the resolve method. I wonder if there is something simpler/cleaner...</p>