Base solution for your next web application
Starts in:
01 DAYS
01 HRS
01 MIN
01 SEC
Open Closed

Slow admin module loading, how to eager load? #2698


User avatar
0
paradoxit created

With the Angular 3.3.0 solution, how can I eager load the admin module? Currently when the site loads and I click any of the admin pages there is a delay of 3-4 seconds for the module to load.

Any advice would be much appreciated.

Thanks,

David Hawkins


5 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Current version uses lazy load, this causes the delay. Lazy load increases site's initial load time and makes development faster.

    Have you tried this in production ? Because it might be slower in development mode. If this is not acceptable for you, you can disable lazy load but we didn't do this and don't have experience on it. You can search on angular-cli's github repository for that.

    Thanks.

  • User Avatar
    0
    paradoxit created

    Thanks, I tried it in production and it's still 3-4 seconds.

    I'll look into how to disable lazy loading for that module. I also heard about a feature called Preloading.

    Kind regards,

    David

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    We will be very happy to hear your feedback on this.

  • User Avatar
    0
    paradoxit created

    I updated my root-routing.module.ts file to preload all lazy loaded routes and now there is no delay.

    See below code:

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
    
    const routes: Routes = [
        { path: '', redirectTo: '/app/main/home', pathMatch: 'full' },
        {
            path: 'account',
            loadChildren: 'account/account.module#AccountModule', //Lazy load account module
            data: { preload: true }
        }
    ];
    
    @NgModule({
        imports: [RouterModule.forRoot(routes,
        {
            preloadingStrategy: PreloadAllModules
        }),],
        exports: [RouterModule],
        providers: []
    })
    export class RootRoutingModule { }
    
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Thank you very much for sharing the solution :). I think this will help others.