CODEWITHSUNDEEP
angularangular6lazy-loadingangular-routing
luckyamit
luckyamit

Reputation: 749

Angular 6: Load multiple module on same page with Lazy Loading

I have an app where i want to lazy load multiple modules in the same page one by one so that i can reduce page load time (like in my dashboard page) with the same route path.

My app-routing.modules.ts file:

const appRoutes: Routes = [
    { path: 'dashboard',
      loadChildren: './dashboard/dashboard.module#DashboardModule'
    },
    { path:'dashboard', 
      loadChildren: () => UserlistComponent, pathMatch:'full' 
    },
    { path:'dashboard', 
      loadChildren: () => ClientlistComponent, pathMatch:'full' 
    },
    { path: '', 
    loadChildren: './home/home.module#HomeModule'
    },

My dashboard-routing.modules.ts file would look like this :

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
  },
];

i cant' find anyway to do it like this : i want to load both component(user list and client list lazi loaded one by one so that i can reduce page load time ) when user redirect on dashboard page.

there is similar stackoverflow question (link) to this but i want to load component with lazy loading concept enter image description here

enter image description here

Upvotes: 2

Views: 6514

Answers (2)

Jose Alejandro Concepcion
Jose Alejandro Concepcion

Reputation: 1

I had the same concern, I had a dashboard module that had 5 sections of which 4 were carrucel with mat-card components full of images. What I did was simulate lazy loading with these components using * ngIf. Create a state where all components had load = false and based on. AfterViewInit life cycle each component was set to true the next so on. And so the initial low load and the user experience improved. It's something similar to Perform Promises in series.

Upvotes: 0

Alex
Alex

Reputation: 1158

As I understand it you should probably import your UserList and ClientList components in the dashboard module. If you need them in the same page, then you should call them directly from your dashboard component template. Basically the loadChildren property when loading your dashboard module is already performing the lazy loading you seem to aiming for.

That would give you this for the app routes:

const appRoutes: Routes = [
    { path: 'dashboard',
      loadChildren: './dashboard/dashboard.module#DashboardModule'
    },
    { path: '', 
    loadChildren: './home/home.module#HomeModule'
    }
];

Keep the dashboard routing as is, but just place your UserListComponent and ClientListComponent in the dashboard folder and import them in the dashboard module, before calling them in the dashboard component template.

// Dashboard module

import { UserListComponent } from '@dashboard/user-list/user-list.component';
import { ClientListComponent } from '@dashboard/client-list/client-list.component';

@NgModule({
  declarations : [
    UserListComponent,
    ClientListComponent,
  ] 
})
export class DashboardModule {}

<!-- Dashboard component -->

<h1> Dashboard </h1>

<div class="row">
  <div class="col-6">
    <app-user-list></app-user-list>
  </div>
  <div class="col-6">
    <app-client-list></app-client-list>
  </div>
</div>

Upvotes: 1

Related Questions