How to lazy load nested routes for auxiliary router-outlet in Angular

Question

I have two router-outlet components in my app component. How can I successfully lazy-load the nested route which is secondary router-outlet?

I have the following routes in the MerchandiseListComponent, this component loads just fine:

const routes: Routes = [
      {
        path: "",
        component: MerchandiseListComponent,
        data: { animation: "MerchandiseListPage" },
        children: [
          {
            path: ":id/edit",
            outlet: "modal",
            loadChildren:
              "./merchandise-dialog-container/merchandise-dialog-container.module#MerchandiseDialogContainerModule"
          },
          {
            path: "new",
            outlet: "modal",
            loadChildren:
              "./merchandise-dialog-container/merchandise-dialog-container.module#MerchandiseDialogContainerModule"
          }
        ]
      }
    ];`

Here are routes for my lazy-loaded module merchandise-dialog-container.module:

    const routes: Routes = [
      {
        path: "",
        children: [
          {
            path: ":id/edit",
            outlet: "modal",
            component: MerchandiseDialogContainerComponent
          },
          {
            path: "new",
            outlet: "modal",
            component: MerchandiseDialogContainerComponent
          }
        ]
      }
    ];

The problem when the MerchandiseListComponent is loaded, none of the lazy-loaded routes are loaded, it just defaults back to the catch-all path.

Arshad Arshad · Accepted Answer · 2019-05-13T00:43:13

You can't lazy load a component. Angular's lazy loading works at module level. That means, you can lazy load a module, through a route.

    const routes: Routes = [ 
        { 
            path: "", 
            children: [ 
        { 
            path: ":id/edit", 
            outlet: "modal", 
            loadChildren: "/src/app/location_to_module#MerchandiseDialogContainerModule"
        }, 
        {
            path: "new", 
            outlet: "modal", 
            loadChildren: "/src/app/location_to_module#MerchandiseDialogContainerModule"
        }]
    }];

You can also see HERE.

How to lazy load nested routes for auxiliary router-outlet in Angular

1 Answers