Angular 6 - 路由到懒惰模块的子模块不起作用

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 (eg 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

Answer 2

Your mistake is what you're trying to see crises and heroes as a child routes of AdminComponent but they are on the same level as AdminComponent . Try to correct your code:

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

Now angular will match your routes regarding the base / as

• admin to AdminComponent
• admin/crises to ManageCrisesComponent
• admin/heroes to ManageHeroesComponent

Fork from angular official example with added child route: https://stackblitz.com/edit/angular-omprkj

Answer 3

in ManageHeroesComponent.html use <router-outlet></router-outlet> to call child component

  {
    path: '',
    children: [
        { path: "" , component: ManageHeroesComponent },
        { path: 'zeroes', component: ManageZerosComponent },
        { path: 'friends', component: ManageFriendsComponent }
    ]
  }
];