wake-up-neo.com

Angular 6 - Routing zum Kindermodul eines Lazy-Moduls funktioniert nicht

Ich versuche, eine Anwendung zu entwickeln, bei der das Root-Modul eine Liste von Router-Links anzeigt, die Lazy-Module laden:

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 diesem Fall verfügt das Admin-Modul über zwei Router-Links für Komponenten, die von ihm selbst deklariert werden, und einen Router-Link für ein anderes Modul (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 }
        ]
      }
    ]
  }
];

Ich kann gut zu allen Pfaden navigieren, aber wenn Sie zu Helden gehen und versuchen, zu einer eigenen Route (z. B. Nullen) zu navigieren, wird eine Seite nicht gefunden. Das Helden-Routing sieht so aus:

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

Ich stelle fest, dass ich, wenn ich den Heldenpfad in Admin verwende, nach:

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

Ich kann die Heldenrouten gut erreichen. Aber ich würde gerne verstehen, warum ich nicht auf sie zugreifen kann, ohne das ManageHeroes-Modul zu laden.

Hier ist ein Link zu stackblitz mit einer Reproduktion meines Problems https://stackblitz.com/edit/angular-pm9wsz

Vielen Dank.

3
vanio

Ihr Fehler ist, was Sie versuchen, crises und heroes als untergeordnete Routen von AdminComponent zu sehen, aber sie sind auf derselben Ebene wie AdminComponent. Versuchen Sie, Ihren Code zu korrigieren: 

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

Nun wird eckig mit Ihren Routen in Bezug auf die Basis / als übereinstimmen

  • admin zu AdminComponent
  • admin/crises in ManageCrisesComponent
  • admin/heroes in ManageHeroesComponent

Gabel aus eckigem offiziellem Beispiel mit zusätzlicher untergeordneter Route: https://stackblitz.com/edit/angular-omprkj

0
Andrei Zhamoida