Loading the screen into the router socket before initializing the lazy loaded Angular2 module

Question

I am trying to display the boot screen in the socket of the router before receiving the data.

here is my code inside index.html

<root> <div class="app-content text-center"> <div class="app-content-body" > <div class="loader_div" > <div class="loader"></div> </div> </div> </div> </root> 

which works as expected, but when I try to execute the same code inside, it remains inside the screen even after the screen loads.

One possible solution is that I can subscribe to the router event and use instanceof NavigationStart and NavigationEnd. And use ngIf to remove the DOM from the routeroutlet.

Is there an even easier way to solve this problem?

Edit1: After subscribing to the router event, I realized that this is not a wise decision. Because in the event that there is more than one nested router-exit, it will show the update screen on the entire page, and not on the part where the child router-outlet is located. When I check the DOM, <ng-component> does not replace <router-outlet> , but loads after the end of the tag. ( </router-outlet> ) Is this an Angular2 bug?