My scenario is as follows. I have a menu, with multiple options. Each menu should be shown depending on user permissions (already solved), most menu items are encapsulated as modules, and most of the modules are lazy loaded, so when a user clicks a menu item the first time, it loads (up to here everything works well), now my requirement is, in order to give a better user experience, I need to show activity indicator after user clicks a menu item while the lazy loaded module is loading.
Up to this, I tried using canActive, canLoad, canActivateChild interfaces from Angular Router but with no luck.
Any ideas?
If you want to check how lazy loading works and how lazy loading routing flow, then Augury is the best tool we have. Click on ctrl+F12 to enable the debugger and click on the Augury tab. Click on the router tree. Here, it will show the route flow of our modules.
To lazy load Angular modules, use loadChildren (instead of component ) in your AppRoutingModule routes configuration as follows. content_copy const routes: Routes = [ { path: 'items', loadChildren: () => import('./items/items. module'). then(m => m.
Angular 2 Lazy loading a module With lazy loading our application does not need to load everything at once, it only needs to load what the user expects to see when the app first loads. Modules that are lazily loaded will only be loaded when the user navigates to their routes.
Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated. It improves the speed of the application load time by splitting the application into several bundles. When the user navigates through the app, the bundles are loaded as required.
You can listen for two router events:
RouteConfigLoadStart
RouteConfigLoadEnd
They fire when a lazy loaded module is being loaded. The advantage of using these over the standard router events such as NavigationStart
is that they won't fire on every route change.
Listen to them in your root AppComponent to show / hide your spinner.
app.component.ts
import { Router, RouteConfigLoadStart, RouteConfigLoadEnd } from '@angular/router'; ... export class AppComponent implements OnInit { loadingRouteConfig: boolean; constructor (private router: Router) {} ngOnInit () { this.router.events.subscribe(event => { if (event instanceof RouteConfigLoadStart) { this.loadingRouteConfig = true; } else if (event instanceof RouteConfigLoadEnd) { this.loadingRouteConfig = false; } }); } }
app.component.html
Just a simple string here, but you could use a spinner component.
<router-outlet></router-outlet> <ng-container *ngIf="loadingRouteConfig">Loading route config...</ng-container>
I'm using this approach with Angular v4.2.3
you can do it like this
<div class="main-loader" *ngIf="loading"> <div class="cssload-container" > <div class="cssload-whirlpool"></div> </div> </div>
in app.component.ts
import { Router, NavigationStart, NavigationEnd } from '@angular/router'; loading:boolean = false; constructor(private router:Router) { router.events.subscribe(event => { if(event instanceof NavigationStart) { this.loading = true; console.log("event started") }else if(event instanceof NavigationEnd) { this.loading = false; console.log("event end") } // NavigationEnd // NavigationCancel // NavigationError // RoutesRecognized }); }
in css any loading animation
hope this is useful to you. thanks
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With