Angular child route loading parent instead of child component

Question

Am trying to navigate my Angular application based on parent child concept. When am loading the parent component gets loaded instead of the child but the url seems the

const appRoute: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent },
  {
    path: 'solutions', component: SolutionComponent,
    children: [
      { path: 'cog', component: CogComponent }
    ]
  },
  { path: 'portfolio', component: PortfolioComponent },
  { path: '**', component: PortfolioComponent }
];

When I run solutions/cog it redirects to SolutionComponent but it should load CogComponent

EDIT: 1

It will work when I use

const appRoute: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'solutions', component: SolutionComponent },
  { path: 'solutions/cog', component: CogComponent },
  { path: 'portfolio', component: PortfolioComponent },
  { path: '**', component: PortfolioComponent }
];

But I want it should load from above method.

Please help to solve this issue.

Answer 1

...
{
    path: 'solutions', component: SolutionComponent,
    children: [
        { path: 'cog', component: CogComponent }
    ]
},
...

Since you have declared a component for the path solutions hence it is showing SolutionComponent and it will render CogComponent in the nested router-outlet

{ path: 'dashboard', component: DashboardComponent },
{
    path: 'solutions'
    children: [
        { path: 'cog', component: CogComponent },
        { path: '', component: SolutionComponent, pathMatch: 'full'}
    ]
},
...

The above route should work as you intended.

Answer 2

Your Second Appraoch works because Angular will load the CogComponent Template in the Parent Router Outlet itself. If that's what you want, then you're good to go with that approach.

But if you want to have the SolutionComponent as a parent to the CogComponent , then you'll have to add a <router-outlet></router-outlet> to the solution.component.html .

Here's how:

...

<router-outlet></router-outlet>

This will tell Angular that it needs to load the CogComponent in there as the /cog is a Child Route to the /solution route.

---

Here's a Working Sample StackBlitz for your ref.