Angular default child route not loading parent component

Question

I'm building an angular 5 app, and I'm having trouble playing with routes...

I have 2 master layouts and each one of them has their child routes like below:

SiteLayoutComponent - HomeComponent AppLayoutComponent - ContactComponent

My problem is with the default route, when the app loads for the first time, with the empty URL, the Router must redirect to Home Component, which has the child route "SiteLayoutComponent", the problem here is that it's loading only the HomeComponent but not the "SiteLayoutComponent" which has a <navbar-component> . It only works when enter /home at the browser. Below are my routes:

const appRoutes: Routes = [

{
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
},
//Site routes goes here        
{
    path: 'home',
    component: SiteLayoutComponent,
    children: [
        { 
            path: '', 
            component: HomeComponent 
        }
    ]
},
//App routes goes here
{
    path: 'app',
    component: AppLayoutComponent,
    children: [
        { path: 'contact', component: ContactComponent }
    ]
},
//No layout routes    
{
    path: '**', redirectTo: 'home'
}

];

export const routing = RouterModule.forRoot(appRoutes, { enableTracing: true });

It should have shown the HomeComponent with SiteLayoutComponent (which contains the navbar), but it only shows the SiteLayoutComponent (which contains the navbar) when typing the URL like " http://localhost:4200/home ".

SiteLayoutComponent

<layout-site-navbar></layout-site-navbar>
<router-outlet></router-outlet>

SiteNavbarComponent

<nav class="navbar navbar-default">
<div class="container-fluid">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->

Please help me! Thanks in advance...

Answer 1

Probably because SiteLayoutComponent and HomeComponent have the same path ie /home.
Either use one component with following content

<layout-site-navbar></layout-site-navbar>
<h1>THIS IS THE HOME PAGE<h1>

OR define your routes like below

{ path: 'home', component: SiteLayoutComponent,
    children: [
      { path: '', redirectTo: 'detail', pathMatch: 'full' },
      { path: 'detail', component: HomeComponent}
    ]
  }

Have a look in Defining Child Routes

Answer 2

Let us say you have a parent you are routing to which has some information to be shown and under this information you have two components to be shown one at a time based on a router configuration. This is how we can do it. The empty path route is the key.

`

 { path: 'parent', component: ParentComponent, children: [ { path: '', redirectTo: 'defaultChild', pathMatch: 'full' }, { path: 'defaultChild', component: ChildComponent }, { path: 'otherChild', component: OtherChildComponent }] }