Angular 6 child routes not working

Question

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.

Here is the structure of my app

└───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

Here is the routing, app.routing.module.ts

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

Here is the html

<nav class="main-nav">
    <ul class="main-nav__list " ng-sticky [addClass]="'main-sticky-link'" [ngClass]="ref.click === true? 'Navbar__ToggleShow' :''">
          <li class="main-nav__item" routerLinkActive="active">
            <a class="main-nav__link" routerLink="/">Home</a>
          </li>
          <li class="main-nav__item" routerLinkActive="active">
            <a class="main-nav__link" routerLink="/home/about">About us</a>
          </li>
          <li class="main-nav__item" routerLinkActive="active">
            <a class="main-nav__link" routerLink="/home/what">What we do</a>
          </li>
          <li class="main-nav__item" routerLinkActive="active">
            <a class="main-nav__link" routerLink="/home/projects">Projects</a>
          </li>
          <li class="main-nav__item" routerLinkActive="active">
            <a class="main-nav__link" routerLink="/home/contacts">Contacts</a>
          </li>
        </ul>
</nav>
<div class="majeni-app">
  <app-whatwedo></app-whatwedo>
  <app-about></app-about>
  <app-projects></app-projects>
  <app-why-choose-us></app-why-choose-us>
  <app-team></app-team>
  <app-footer></app-footer>
</div>

UPDATE here is the gitbuh repo for reference https://github.com/gruby-murzyn/agency/tree/master/majeni

when I click eg about us nothing is happening but the url on browser loooks okay

http://localhost:4200/home/about

what am I doing wrong in my codes?

Answer 1

When you use children inside of your routes the parent component needs to have <router-outlet></router-outlet> inside it's html in order for the children to be loaded inside that parent. Angular Docs on Child Configuration

Additionally, with routed components it is not necessary to add the component selector inside the html of the parent component as they will be injected automatically by the router below your router-outlet.

So you in your case change your last div to show:

<div class="majeni-app">
 <router-outlet></router-outlet>
<!-- All children will be inserted here -->
  <app-footer></app-footer>
</div>

Or selectors you had inside of your html are not routed components and should be shown on each child then simply add the router-outlet to the specific location

<div class="majeni-app">
  <app-whatwedo></app-whatwedo>
  <app-about></app-about>
  <app-projects></app-projects>
  <app-why-choose-us></app-why-choose-us>
  <app-team></app-team>
  <router-outlet></router-outlet>
  <!-- All children will be loaded here -->
  <app-footer></app-footer>
</div>