I am trying to implement a component with children compents using router-outlet tag and routerModule from Angular.
The issue with the angular RouterModule. For some unknown reason, having more than 2 children for a parent component does not work. In my case, the 3rd link is simply not working and if I open chrome console, the link it tries to navigate to is not localhost:4200 but localhost:8080.
If I change the order, then one of them will simply not work.
RouterModule.forChild([
{ path: '', component: MainComponent, canActivate: [AuthGuard]},
{ path: 'project',
component: MainComponent,
children : [
{
path: ':id/:qid',
component: DataComponent
},
{
path: ':id',
component: ProjectComponent
},
{
path: 'search',
component: SearchComponent
},
]
}
])
This is an image of what I'm getting in chrome console. It is not supposed to reach out at the server.