Angular routes children do not hit

Question

I am using the latest version of Angular. I am trying to define routes with children to follow adequate hierarchy.

I have app-routing.module.ts which has the following:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeRoutes } from './modules/home/home-routing.module';
import { QuickReferenceRoutes } from './modules/quick-references/quick-reference-routing.module';

const routes: Routes = [
  ...QuickReferenceRoutes,
  ...HomeRoutes
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

The other files it calles for route are as following:

home-routing.module

import { Route } from '@angular/router';

import { HomeComponent } from './home.component';

export const HomeRoutes: Route[] = [
      { path: '', component: HomeComponent }
];

quick-reference-routing.module

import { Routes } from '@angular/router';

import { QuickRefComponent } from './quick-reference.component';
import { CombatQRFComponent } from './combat-quick-reference/combat-qrf.component';

export const QuickReferenceRoutes: Routes = [
    {
        path: 'quick-reference',
        component: QuickRefComponent,
        children: [
            { path: 'test', component: CombatQRFComponent }
        ]
    },
    {
        path: 'quick-reference/combat',
        component: CombatQRFComponent
    }
];

So after this setup quick-reference/combat loads CombatQRFComponent, but at quick-reference/test CombatQRFComponent does not load it. It loads QuickRefComponent instead. I tried to look for this problem, but I can't seem to find anyone with similar problem.

All tutorials say that if you config your routes like this, with children routes, the route quick-reference/test should load CombatQRFComponent. Instead it loads the component of the parent route.

Edit: Here is a link to the repo for better view of the whole structure: https://github.com/Panglot/DnD_app

Answer 1

try this

    import { Routes } from '@angular/router';

    import { QuickRefComponent } from './quick-reference.component';
    import { CombatQRFComponent } from './combat-quick-reference/combat-qrf.component';

    export const QuickReferenceRoutes: Routes = [
        {
            path: 'quick-reference',
            children: [
                { path: '', component: QuickRefComponent}
                { path: 'test', component: CombatQRFComponent }
            ]
        },
        {
            path: 'quick-reference/combat',
            component: CombatQRFComponent
        }
    ];