How to display waiter while resolving data in Angular 2.0.0?

I've project based on Angular 2.0.0, and I want to display waiter (gif or text) while navigating routes, which must resolve data like this:

      path: 'profile',
      loadChildren: () => System.import('../profile/profile.module'),
      resolve: {
        profile: ProfileResolver

Also, preloader need to be applied to every route in project. Thanks.


I'd say you can create a service which would keep eye on routing events and based on NavigationStart & NavigationEnd event it will show/hide loading based on isLoading flag value with combination of [hidden].


isLoading: bool = false;
constructor(router:Router) { => {
    if(event instanceof NavigationStart) {
       this.isLoading = true;
    if(event instanceof NavigationCancel || event instanceof NavigationError) {
       this.isLoading = false;


 ? Populating a child router-outlet Angular2
 ? Providing input/subcommands to command executed over SSH with JSch Using JSF
 ? Providing input/subcommands to command executed over SSH with JSch
 ? How do I programaticly navigate to a route from an event handler in React Router 4.0?
 ? Get react router path in props with redux ownProps
 ? Using goBack function from react-router-redux
 ? Router outlet without tag?
 ? Angular2 router and localhost/webapp
 ? Access server in local network through domain
 ? routing data to my param page in react.js