Angular child route loading parent instead of child component

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.

...
{
    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.