title: Angular 6 child routes not working
body: <p>I have a simple navigation for angular 6 app , I am trying to make routing and child routing work in a simple configuration, but unfortunately I can not seem to make it work.</p>
  
  <p>Here is the structure of my app </p>
  
  <pre><code>└───src
      ├───app
      │   ├───components
      │   │   ├───about
      │   │   ├───clients
      │   │   ├───footer
      │   │   ├───how-it-wo
      │   │   ├───partners
      │   │   ├───projects
      │   │   ├───team
      │   │   ├───whatwedo
      │   │   └───why-choos
      │   ├───layout
      │   │   └───main-layo
      │   └───shared
      ├───assets
      │   ├───charts
      │   ├───css
      │   ├───fonts
      │   ├───icon
      │   └───images
      └───environments
  </code></pre>
  
  <p>Here is the routing, <code>app.routing.module.ts</code></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { RouterModule, Routes } from '@angular/router';
  import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
  import { AboutComponent } from './components/about/about.component';
  import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
  import { ProjectsComponent } from './components/projects/projects.component';
  import { FooterComponent } from './components/footer/footer.component';
  const routes: Routes = [
    {
      path: '',
      redirectTo: 'home',
      pathMatch: 'full'
    },
    {
      path: 'home',
      component: MainLayoutComponent,
      children: [
        {
          path: 'about',
          component: AboutComponent
        },
        {
          path: 'what',
          component: WhatwedoComponent
        },
        {
          path: 'projects',
          component: ProjectsComponent
        },
        {
          path: 'contacts',
          component: FooterComponent
        }
      ]
    }
  ];
  
  
  @NgModule({
    imports: [
      CommonModule,
      RouterModule.forRoot(routes),
    ],
    declarations: [],
    exports: [
      RouterModule
  ]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>Here is the html </p>
  
  <pre><code>&lt;nav class="main-nav"&gt;
      &lt;ul class="main-nav__list " ng-sticky [addClass]="'main-sticky-link'" [ngClass]="ref.click === true? 'Navbar__ToggleShow' :''"&gt;
            &lt;li class="main-nav__item" routerLinkActive="active"&gt;
              &lt;a class="main-nav__link" routerLink="/"&gt;Home&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="main-nav__item" routerLinkActive="active"&gt;
              &lt;a class="main-nav__link" routerLink="/home/about"&gt;About us&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="main-nav__item" routerLinkActive="active"&gt;
              &lt;a class="main-nav__link" routerLink="/home/what"&gt;What we do&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="main-nav__item" routerLinkActive="active"&gt;
              &lt;a class="main-nav__link" routerLink="/home/projects"&gt;Projects&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="main-nav__item" routerLinkActive="active"&gt;
              &lt;a class="main-nav__link" routerLink="/home/contacts"&gt;Contacts&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;div class="majeni-app"&gt;
    &lt;app-whatwedo&gt;&lt;/app-whatwedo&gt;
    &lt;app-about&gt;&lt;/app-about&gt;
    &lt;app-projects&gt;&lt;/app-projects&gt;
    &lt;app-why-choose-us&gt;&lt;/app-why-choose-us&gt;
    &lt;app-team&gt;&lt;/app-team&gt;
    &lt;app-footer&gt;&lt;/app-footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong> here is the gitbuh repo for reference
  <a href="https://github.com/gruby-murzyn/agency/tree/master/majeni" rel="noreferrer">https://github.com/gruby-murzyn/agency/tree/master/majeni</a></p>
  
  <p>when I click eg about us  nothing is happening but the url on browser loooks okay </p>
  
  <p><code>http://localhost:4200/home/about</code></p>
  
  <p>what am I doing wrong in my codes?</p>