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?

@Nico here is the link to github https://github.com/gruby-murzyn/agency/tree/master/majeni — The Dead Man, Aug 27 '18 at 03:07
in app.component.html , here is the link to the app in github https://github.com/gruby-murzyn/agency/tree/master/majeni — The Dead Man, Aug 27 '18 at 03:09
You have wrong import in app.module.ts use `import { AppRoutingModule } from './app-routing.module';` instead of import { AppRoutingModule } from './/app-routing.module'; — alt255, Aug 27 '18 at 03:14
@alt255 bro appRouting is imported automatically using angular cli, when generated using `ng g module app routing`, so that is not the problem, even removing what u suggested does not solve the problem — The Dead Man, Aug 27 '18 at 03:18

score 58 · Accepted Answer · answered Aug 27 '18 at 03:17

58

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>

answered Aug 27 '18 at 03:17

Nico

1,961
17
20

your right bro as you can see your method displays only header and footer, , but I want everything to be displayed when the app is live and when user click about us or our poject or contacts , should just scroll down to about us section or projects or contacts etc, is it possible to achieve that? if so how? – The Dead Man Aug 27 '18 at 03:23
after you have edited your answer, everything is loaded , but when I click eg about us , the page does not scroll down to about us section, is it possible to achieve that? – The Dead Man Aug 27 '18 at 03:26
what happens when you navigate to any page? does it scroll to the top or does the scroll position remain the same? – Nico Aug 27 '18 at 03:29
does nothing bro, I want something like this http://angular-landing.mhrafi.com/home/one try click any nav link you will see what happen – The Dead Man Aug 27 '18 at 03:31
I think you need to look into using fragments if you want them to be controlled by the router. Where a Fragment refer to certain elements on the page identified with an id attribute. https://angular.io/guide/router#query-parameters-and-fragments – Nico Aug 27 '18 at 03:37
Thanks bro, I will try using Id and scrollto get what I want – The Dead Man Aug 27 '18 at 03:39
3

I'm not sure why I missed this detail, but I NEVER knew that the output of a child route had to go IN the parent component. This is the first time I've seen it actually explained. Makes perfect sense though! – goneos Dec 26 '18 at 23:32
Thank you very much !! Same like my friend just above me : I've been stuck for like 2 hours trying to figure out what was the issue with my child routes.. Thank you very much that's a time saving ! (And it was actually written in the official documentation of Angular... Just checked it) – Finalmix6 Sep 05 '20 at 23:08
Adding a inside my Player module added my Player Import/Export/Data modules. Just like black magic. Thanks. – WernerCD Nov 24 '20 at 23:07

Angular 6 child routes not working

1 Answers1