title: How to lazy load nested routes for auxiliary router-outlet in Angular
body: <p>I have two router-outlet components in my app component. How can I successfully lazy-load the nested route which is secondary router-outlet?</p>
  
  <p>I have the following routes in the MerchandiseListComponent, this component loads just fine:</p>
  
  <pre class="lang-js prettyprint-override"><code>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"
            }
          ]
        }
      ];`
  </code></pre>
  
  <p>Here are routes for my lazy-loaded module merchandise-dialog-container.module:</p>
  
  <pre class="lang-js prettyprint-override"><code>    const routes: Routes = [
        {
          path: "",
          children: [
            {
              path: ":id/edit",
              outlet: "modal",
              component: MerchandiseDialogContainerComponent
            },
            {
              path: "new",
              outlet: "modal",
              component: MerchandiseDialogContainerComponent
            }
          ]
        }
      ];
  
  </code></pre>
  
  <p>The problem when the <code>MerchandiseListComponent</code> is loaded, none of the lazy-loaded routes are loaded, it just defaults back to the <code>catch-all</code> path.</p>