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.

Newsreel

It is not redirecting to SolutionComponent. It is working as expected. The way you've configured the routes, SolutionComponent should have a <router-outlet> in the HTML. Then, if you navigate to solutions/cog, it will show the SolutionComponent and the CogComponent in place of router-outlet . – Kassa

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.

Sussna

Is there a way to avoid this ? I need to have my parent and child with component, but I'm also using my route data for breadcrumb.. So I need to have the child in the childrens of my parent with a component for the parent – Snow

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.

Aric