Reputation: 73
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
Upvotes: 1
Views: 491
Reputation: 2966
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
}
];
Upvotes: 2