Angular child component routing is failing?

Question

I have admin page where i have side-navbar where user have add/edit operations, Now when user clicks on add then add component should display in router-oulter that is not happening, any help?

admin.component.html

<div class="container-fluid sidebarContent">
  <div class="row">
    <div class="col-3">
      <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
        <ul class="nav sidebar-nav">
            <li>
              <a class="nav-link" routerLink="['/add']" routerLinkActive="active">Add</a>
            </li>
            <li>
              <a class="nav-link" routerLink="['/edit']" routerLinkActive="active">Edit</a>
            </li>
        </ul>
      </nav>
    </div>
    <div class="col-9">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './_components/admin/admin.component';
import { AddComponent } from './_components/admin/add/add.component';


  const routes: Routes = [
    { path: 'admin', component: AdminComponent,
    children: [
      {
        path: "add",
        component: AddComponent
      }
    ]
   },
    { path: '', redirectTo: '/home', pathMatch: 'full' }
  ];

@NgModule({
  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

From what I can see you only have one route which is /admin/add. You try to route to /add where there is no matching route.

Answer 2

Remove the leading slash in the routerLink , otherwise, it's considered as absolute. Source: https://angular.io/api/router/RouterLink#relative-link-paths

Also if you want the routerLink content to be evaluated as an expression, surround it with square brackets: [routerLink]="['add']" , or just routerLink="add"

Answer 3

Your navigation links are telling Angular to look for either an /add route or an /edit route. However, in your Routes array in app-routing.module.ts , only the /admin , /home , and '' (empty) path exist at the main routing level. Angular cannot find add or edit since they are children to the /admin route.

You can either move the add and edit routes up one level in the route tree like this:

const routes: Routes = [
  { path: 'admin', component: AdminComponent },
  { path: "add", component: AddComponent },
  { path: "edit", component: EditComponent },
  { path: 'home', component: HomeComponent, },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
  <ul class="nav sidebar-nav">
    <li>
      <a class="nav-link" [routerLink]="['/add']" routerLinkActive="active">Add</a>
    </li>
    <li>
      <a class="nav-link" [routerLink]="['/edit']" routerLinkActive="active">Edit</a>
    </li>
  </ul>
</nav>

or you can add another <router-outlet></router-outlet> into admin.component.html and change your routerLink to this:

<p>admin works!</p>
<router-outlet></router-outlet>

<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
  <ul class="nav sidebar-nav">
    <li>
      <a class="nav-link" [routerLink]="['/admin/add']" routerLinkActive="active">Add</a>
    </li>
    <li>
      <a class="nav-link" [routerLink]="['/admin/edit']" routerLinkActive="active">Edit</a>
    </li>
  </ul>
</nav>

In this snippet, if we look at the /admin/add route for example, Angular will evaluate the route and resolve the admin portion of the route (the name in between the first and second / ) and it will know to look for a child 'add' route (because of the second / .

Here is a github repo with the example in case I was a little confusing.