Lazy loading children component

Question

I have a component, it's working fine until I didn't add an heavy children component that freeze the page. Now I would implement a lazy loading for the children component (is that the right solution?).

Also, I start to load the component only if "dataForMapReady" is true.

Actually, that's my html in fhater:

FATHER HTML

<div style="margin: 1.5em 1.5em;" [ngbCollapse]="isCollapsed">
  <div *ngIf="dataForMapReady">
    <mm-map-management [newsearch]="newsearch" [parameters]="parametersToMap" [resultsTotal]="results.total" [checkedFavorite]="checkedFavorite" [sortField]="sortField" [sortDir]="sortDir"></mm-map-management>
  </div>
</div>

I can't understand how to implement lazy loading in this case, I'm newbie of Angular.

Sher Singh · Accepted Answer · 2020-10-14 08:04:57Z

1

Your applicatuion must be devided in modules to Implement Lazy-loading

In your routing module, you need to set routing for child compmenents something like

const routes: Routes = [
    {
        path: 'items',
        loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
    }
];

You can download sample App for lazy Loading implementation https://angular.io/generated/zips/lazy-loading-ngmodules/lazy-loading-ngmodules.zip

Configuring step-by-step lazy-loaded route https://angular.io/guide/lazy-loading-ngmodules

answered Oct 14, 2020 at 8:04

Sher Singh

2875 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sher Singh Over a year ago

You can also check live example on Stackblitz. stackblitz.com/angular/…

Rob None Over a year ago

Actually my app-routing.module.ts is like this: const routes: Routes = [ { path: "companies", component: AppCompanies}, can't use your tip above

Rob None Over a year ago

It should be something like { path: "companies", loadChildren: () => import('./companies/companies.component').then(m => m.AppCompanies).then(MmMapManagementComponent) no?

Sher Singh Over a year ago

In step 1 there should be separate module for companies and component In step 2 you need to load your companies component in companies module In step 3 you need to load your companies module in your main routing file For detailed working see stackblitz.com/angular/…

Collectives™ on Stack Overflow

Lazy loading children component

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related