title: Show loading spinner in lazy-loading modules
body: <p>I have implemented a splash screen in my app, as this way:</p>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>&lt;app-root&gt;&lt;/app-root&gt;
  &lt;div class="splash spinner"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>css:</strong></p>
  
  <pre><code>// ... Styles about spinner
  app-root:empty + .splash {
      opacity: 1;
  }
  </code></pre>
  
  <p>Ok, in this case, the <code>app-root</code> when it's empty, I have a spinner animation and there is no problem, it works fine.</p>
  
  <p>But, my problem comes now, I have lazy loading in routing:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { AuthGuard } from './core';
  
  import {
    ...
  } from './auth';
  
  export const routes: Routes = [
    {
      ..
    },
    {
      path: 'api',
      loadChildren: 'app/api/myapi.module#MyApiModule',
      canActivate: [ AuthGuard ],
    },
    },
  ];
  
  @NgModule({
    imports: [
      RouterModule.forRoot(routes, {
        enableTracing: true
      }),
    ],
    exports: [ RouterModule ]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>In <code>/apis</code> path I'm lazy loading <code>MyApiModule</code>, and inside <code>MyApiModule</code>, I have another routing:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { MyComponent } from './mycomponent.component';
  import { OtherComponent } from './othercomponent.component';
  
  const routes: Routes = [
    {
      path: '',
      component: MyComponent,
      children: [
        {
          path: '',
          component: OtherComponent,
        },
        {
          path: ':id/api',
          loadChildren: 'app/api/api2/api.module#ApiModule',
        },
      ],
    },
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class OtherRoutingModule { }
  </code></pre>
  
  <p>I want to show the same splash screen as I set in 'app-root' when my app is loading a 'lazy-loaded' module (the <code>ApiModule</code> module).</p>
  
  <p>The goal is to show splash screen when a lazy module is loading so, my question is, is there any 'easy' way to catch when a load-children module is loaded (by events or something)? Or I need to accomplish the same way as I did (check in css the router-outlet... etc etc).</p>