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 · Answer 1 · 2019-05-13T00:52:38.697

0

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.

edited May 13 '19 at 00:52

answered May 13 '19 at 00:43

Arshad

218
3
10

Aren't I lazy loading modules? Im pretty sure the path for loadChildren:contains .module at the end. Or am I missing something else? – O.MeeKoh May 13 '19 at 00:44
You need to use "loadChildren" to point to the module, instead of "component" – Arshad May 13 '19 at 00:46
But the first snippet shows the module that is lazy loading the second module, which is the second code snippet. The second code snippet is the lazy loaded module that is supposed to display the components – O.MeeKoh May 13 '19 at 00:48
First snippet is lazy loading all the components inside the module, it's the lazy loaded one. The second one you provided should be loaded directly, as it's been already loaded previously. – Arshad May 13 '19 at 00:51
Can you show me a code example of this please. The above example is pretty much what I already have. – O.MeeKoh May 13 '19 at 00:53
The thing with what I am trying to do is that it doesnt matter which route is hit, any of those routes trigger the same module, its not one or the other its any routes that hit the auxilary router-outlet – O.MeeKoh May 13 '19 at 01:05
Basically, you want to lazy load the children routes? – Arshad May 13 '19 at 01:07
The MerchandiseDiaogContainerModule should only be loaded if the user logged in is an admin. This dialog provides some admin functionlaity. So basically what I want to do is say, when you load the merchandiseList component, dont load the MerchandiseDialogContainerModule right away, wait until user clicks on a special button, and this button is only available if you are an admin. – O.MeeKoh May 13 '19 at 01:09
You should use guards to control module access for different users. Pass the guard class in "canLoad" array of the route, which will check if the user is admin or not. If the user is not admin, it will not load the module. – Arshad May 13 '19 at 01:18
I understand, but is there any reason why above implementation doesnt work? – O.MeeKoh May 13 '19 at 01:19
You should use pathMatch:"full" with the routes and also define an error page with path:"**" to avoid accidental activation of path. Angular DOES activate paths accidentally because of misconfiguration. – Arshad May 13 '19 at 01:24

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

1 Answers1