Show loading animations while modules are lazy loading?

Question

In my main routes, I have a profile module that lazy has loaded on /profile as follows:

  { path: '', component: HomeComponent }, { path: 'profile', loadChildren: './profile/profile.module#ProfileModule' }, { path: '**', redirectTo: '', pathMatch: 'full' } 

However, my profile module takes ~ 1.5 - 2 seconds to load, which is rather slow. I would like to show some kind of boot animation while my module is loading, anyway? I tried to do this:

app.component.html

 <!-- other stuff ... --> <router-outlet></router-outlet> <div class="loading"> <div class="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div> </div> </div> 

and inside my css, I had:

  /* default .loading styles, .loading should be invisible, opacity: 0, z-index: -1 */ .loading { opacity: 0; transition: opacity .8s ease-in-out; position: fixed; height: 100%; width: 100%; top: 0; left: 0; background: #1B1B1B; color: white; z-index: -1; } /* .loading screen is visible when app is not bootstraped yet, .my-app is empty */ router-outlet:empty + .loading, router-outlet:empty + .spinner { opacity: 1; z-index: 100; } /* spinner animation css stuff */ 

But this does not seem to work. Is there any bootloader at all while angular2 modules are loading?

Answer 1

The router-outlet does not place material within itself; it will place it next to it.

When it is empty:

 <router-outlet></router-outlet> 

So, when it is loaded, it will be:

 <router-outlet></router-outlet> <your-code></your-code> // which is loaded afterward 

So router-exit: empty shouldn't do anything.

You can say:

  router-outlet + .loading .spinner { opacity: 1; z-index: 100; }