2

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

luckyamit
  • 719
  • 2
  • 7
  • 19
  • Possible duplicate of [angular 4: load components one by one](https://stackoverflow.com/questions/46234130/angular-4-load-components-one-by-one) – CTheCheese Jan 05 '19 at 14:04
  • 2
    No i want lazy loading, its different – luckyamit Jan 05 '19 at 14:16
  • 1
    As Alex said, you're already lazy loading the modules. Lazy loading is just not requiring everything to load at once. As [this test](https://stackblitz.com/edit/angular-5xuid1) shows, an *ngIf that defaults to false will not initialize a component until it is set to true, so it is essentially the lazy loading you are looking for. – CTheCheese Jan 05 '19 at 14:28
  • you mean to say my and will be load one by one if i do as per Alex answer - @ColbyHunter – luckyamit Jan 05 '19 at 14:41
  • 1
    Essentially, and if you wanted to be real picky about loading (like which loads first), the method shown in the question that I marked as the reason your post is a duplicate allows another layer of lazy loading. – CTheCheese Jan 05 '19 at 14:55
  • look, basically i just want to display some components visible to user (like user list is visible now) at the same time the other component on the same page being start loading (like client list is loading now...) – luckyamit Jan 05 '19 at 15:10
  • Have you tried the method described in the post? That's exactly what it is doing. – CTheCheese Jan 05 '19 at 15:16
  • just have a look on my question again. I have added expected output image. – luckyamit Jan 05 '19 at 15:19
  • @luckyamit were you able to find the answer to this ? – SamuraiJack Aug 29 '19 at 17:41

2 Answers2

1

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>
Alex
  • 1,090
  • 7
  • 21
  • how and will lazy loaded, only dashboard is lazy loaded but i also want userlist and clientlist component to be loaded lazy @Alex – luckyamit Jan 05 '19 at 14:26
  • I understood you want them to be displayed at the same time, in that case there's no need for lazy loading. Another approach would be to make a module for each component, but it seems a bit heavy and will prevent you from displaying them at the same time. – Alex Jan 05 '19 at 14:54
  • i don't want them to be load at same time i just want to be load one by one first load user list then client list and so on.. so that user can view at least user list during the client list is loading and so on. – luckyamit Jan 05 '19 at 15:04
  • just have a look on my question again. i have added expected output image – luckyamit Jan 05 '19 at 15:19
  • It as to do with data management then, asynchronous loading can be performed with observables and a well designed API. You can use boolean flags and *ngIf to display a component once its data are fully loaded – Alex Jan 05 '19 at 15:32
0

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.

Jose Alejandro Concepcion
  • 1