Angular7 routes multiples enfants avec chemin vide

Question

Bonjour StackOverflow

Je suis novice en Angular et je développe actuellement une application à des fins d'apprentissage.

J'ai un module racine (app), et deux modules enfants (quiz et question).

Comportement attendu

• Si je surf sur / => je veux afficher le composant QuestionListComponent dans le QuestionModule
• Si je surf sur /question => je veux afficher le composant QuestionList dans le QuestionModule.
• Si je surf sur /quiz => je veux afficher le QuizComponent dans le QuizModule

Comportement actuel

• Si je surf sur / => le composant QuestionListComponent est chargé
• Si je surf sur /question => le composant QuestionList est chargé.
• Si je surf vers /quiz => le composant QuestionList est chargé au lieu du composant Quiz.

Routes AppModule

RouterModule.forRoot([
  { path: '', pathMatch: 'full', redirectTo: 'questions' },
  { path: 'quiz', loadChildren: './quiz/quiz.module#QuizModule' },
  { path: 'questions', loadChildren: './question/question.module#QuestionModule'}
]);

Routes QuestionModule

RouterModule.forChild([
      { path: '', component: QuestionListComponent },
      { path: 'new', component: QuestionFormComponent, canDeactivate: [UnsavedChangesGuard] },
      { path: 'edit/:id', component: QuestionFormComponent, canDeactivate: [UnsavedChangesGuard] },
    ]),

Routes QuizModule

RouterModule.forChild([
      { path: '', component: QuizComponent }
    ])

Question

De toute évidence, le problème est qu'en surfant sur /quiz, angular trouve d'abord le chemin '' dans le QuestionModule et charge le contenu correspondant.

Mais comment faire pour que, en surfant sur /quiz, le QuizComponent soit chargé ?

Arbre des routeurs Pour une raison quelconque, les composants de la question relèvent du nœud du quiz.

Answer 1

J'ai pu résoudre le problème.

J'ai inclus le QuestionModule dans le QuizModule, ce qui a amené Angular à fusionner les routes forChild. Je l'ai supprimé.

Maintenant, mon arbre à routeur est en pleine forme.