Angular 6 - Routing to child module of a lazy module not working

Question

I'm trying to develop an application where the root module will display a list of router links that will load lazy modules:

const appRoutes: Routes = [
{
 path: 'compose',
 component: ComposeMessageComponent,
 outlet: 'popup'
},
{
 path: 'admin',
 loadChildren: 'app/admin/admin.module#AdminModule',
 canLoad: [AuthGuard]
},
{
 path: 'crisis-center',
 loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
 data: { preload: true }
}
];

In this particular case the admin module will have two router links for components declared by itself and one router link for another module (manage-heroes):

const adminRoutes: Routes = [
  {
    path: '',
    component: AdminComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        canActivateChild: [AuthGuard],
        children: [
          { path: 'crises', component: ManageCrisesComponent },
          {path: 'heroes', component: ManageHeroesComponent},
          { path: '', component: AdminDashboardComponent }
        ]
      }
    ]
  }
];

I can navigate fine to all paths, but if go to heroes and try to navigate to one of its own routes (e.g. zeroes) I get a page not found. The heroes routing looks like this:

const manageHeroesRoutes: Routes = [
  {
    path: '',
    component: ManageHeroesComponent,
    children: [
        { path: 'zeroes', component: ManageZerosComponent },
        { path: 'friends', component: ManageFriendsComponent }
    ]
  }
];

I notice that if I replace the heroes path in admin routes to:

children: [
  { path: 'crises', component: ManageCrisesComponent },
  {path: 'heroes', loadChildren: 'app/admin/manage-heroes/manage-heroes.module#ManageHeroesModule'},
  { path: '', component: AdminDashboardComponent }
]

I can access the heroes routes just fine. But I would like to understand why can't I access them without lazy loading the ManageHeroes module.

Here is a link to stackblitz with a reproduction of my problem https://stackblitz.com/edit/angular-pm9wsz

Thanks.

Answer 1

When you use component in the route path, you define a component to handle this route. The Angular will load only that component. In you case, the component is in other module, but the angular will not load none of the other module itens, including its routes.

When use a "load children" at route path definition, the angular will lazy load the module and your itens, including its inner routes.

https://angular.io/guide/lazy-loading-ngmodules