Angular7 multiple child routes with empty path

Question

Hi StackOverflow

I am new to Angular, and currently developing an application for learning purposes.

I have one root module (app), and two child modules (quiz and question).

Expected behavior

• If I surf to / => I want to show the QuestionListComponent in the QuestionModule
• If I surf to /question => I want to show the QuestionListComponent in the QuestionModule
• If I surf to /quiz => I want to show the QuizComponent in the QuizModule

Current behavior

• If I surf to / => QuestionListComponent is loaded
• If I surf to /question => QuestionListComponent is loaded
• If I surf to /quiz => QuestionListComponent is loaded instead of QuizComponent

AppModule routes

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

QuestionModule routes

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

QuizModule routes

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

Question

Obviously, the problem is that when surfing to /quiz, angular finds the '' path in the QuestionModule first and loads the corresponding content.

But, how would I fix this, so that when surfing to /quiz, the QuizComponent is loaded?

Router tree For some reason, the Question components falls under the quiz node

Answer 1

I was able to solve the issue.

I included the QuestionModule in the QuizModule, causing Angular to merge the forChild routes. I removed it.

Now my router tree is looking good.