web-dev-qa-db-fra.com

Angular 6 - Le routage vers le module enfant d'un module différé ne fonctionne pas

J'essaie de développer une application où le module racine affichera une liste de liens de routeur qui chargeront des modules différés:

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 }
}
];

Dans ce cas particulier, le module d'administration aura deux liens de routeur pour les composants déclarés par lui-même et un lien de routeur pour un autre 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 }
        ]
      }
    ]
  }
];

Je peux très bien naviguer sur tous les chemins, mais si vous accédez aux héros et essayez de naviguer sur l’un de ses propres itinéraires (par exemple, des zéros), la page n’est pas trouvée. Le routage des héros ressemble à ceci:

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

Je remarque que si je remplace le chemin des héros dans les routes d'administration vers:

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

Je peux très bien accéder aux routes des héros. Mais j'aimerais comprendre pourquoi je ne peux pas y accéder sans charger paresseux le module ManageHeroes.

Voici un lien vers stackblitz avec une reproduction de mon problème https://stackblitz.com/edit/angular-pm9wsz

Merci.

angularrouteslazy-loading
3
vanio

Votre erreur est ce que vous essayez de voir crises et heroes comme une route enfant de AdminComponent mais elles sont au même niveau que AdminComponent. Essayez de corriger votre code: 

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

Maintenant angulaire correspondra à vos itinéraires en ce qui concerne le / de base comme

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

Fork à partir d'un exemple officiel angulaire avec une route enfant ajoutée: https://stackblitz.com/edit/angular-omprkj

0
Andrei Zhamoida