Lazy loading auxiliary routes

Question

Here the scenario, I have a mainpage with 3 routes (child of mainpage each lazy loaded).

Here the auxiliary component has one primary outlet and other auxiliary as

<router-outlet name="auxone"></router-outlet>

and this is how my mainpage.route file looks

Now my auxilary route loads perfectly and im able to route in primary outlet with any problem. But as soon as i try to load a route in the auxiliary outlet like this

& try to navigate them using

(Aux route has one child as its own, and im trying to load another route as another child for the same aux) i get errors:

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'mainpage/aux'

As im unable to see any documentation on how to load and route aux routes lazy loading im at my wits end finding out how to make this work.

where exactly am i going wrong?

Here's my project structure

Answer 1

You should not and can not include the outlet: parameter on the lazy load path. the lazy loaded routes are hidden away from the eagerly loaded application by design.

Instead you should build a module for outlets components and it should have its own routing configuration. In that router configuration you can set up a route to your Auxiliary outlets.

Answer 2

You did nothing wrong, it just was a long lasting bug in angular router, that got fixed (partly) in [email protected]. Partly because, to achieve your goal, you have to configurate the lazy loaded module in your app routes as unnamed route and instead name the parent route in your lazy loaded module router configuration:

app.routes

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    /* no name for lazy loaded route */
    path: '',
    loadChildren: './home/home.module#HomeModule'
  },
  {
    /* you can add multiple empty routes without conflicts */
    path: '',
    loadChildren: './about/about.module#AboutModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

home.routes

export const homeRoutes: Routes = [
  {
    /* your lazy loaded module route needs to be named */
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: '',
        component: HomeListComponent
      },
      {
        path: 'form',
        component: HomeFormComponent,
        outlet: 'popup'
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(homeRoutes)],
  exports: [RouterModule]
})
export class HomeRoutingModule {
}

while your home component template look like this:

<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>

and the routerLink has to look like this

[routerLink]="['/home', { outlets: { popup: ['form'] } }]"