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

Please show the html code for SiteLayoutComponent. Have you added <router-outlet> in SiteLayoutComponent? — Yousef khan
– Yousef khan, Commented May 21, 2018 at 23:24
Hi Yousef Khan, thanks for your reply! Yes i've added the <router-outlet> in SiteLayoutComponent.... I've updated my question...take a look please! — Junior Silva
– Junior Silva, Commented May 21, 2018 at 23:41
Just make sure <layout-site-navbar></layout-site-navbar> is working fine. Can you try adding some other tags above <router-outlet></router-outlet> in SiteLayoutComponent? I think it is loading SiteLayoutComponent but there is nothing to display there. — Yousef khan
– Yousef khan, Commented May 21, 2018 at 23:49
also doesn't work, i added another component and also the <h1> tag but, it act as the same, only show SiteLayoutComponent content when i go "localhost:4200/home", but "localhost:4200" doesn't show it initially when the page loads for the first time through redirect route to '/home' — Junior Silva
– Junior Silva, Commented May 22, 2018 at 0:13

Yousef khan · Accepted Answer · 2018-05-22 00:41:22Z

8

Probably because SiteLayoutComponent and HomeComponent have the same path i-e /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

answered May 22, 2018 at 0:41

Yousef khan

3,2443 gold badges17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Junior Silva Over a year ago

Hi Yousef, thanks for the helpe, but it's still not working, i've made the changes but it works the same way, only shows the master SiteLayoutComponent after type /home routing and hit enter, but not on first load...

Yousef khan Over a year ago

So what happens when you hit localhost:4200? does it redirect to localhost:4200/detail

Junior Silva Over a year ago

No, it doesn't redirect, and i'm only able to see the home page content wich is "THIS IS THE HOME PAGE" but it doesn't show the SiteLayoutComponent with the navbar

Nitin Kamate · Accepted Answer · 2019-08-12 07:23:17Z

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
    }]
}

Collectives™ on Stack Overflow

Angular default child route not loading parent component

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related