Angular 5: Cannot match any routes

Question

I Created a angular 5 app, and I defined the following app-routing.module.ts

import { ControlPanelComponent } from './dashboard/control-panel/control-panel.component';
import { MainComponent } from './dashboard/main/main.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  {path: '', redirectTo: '/dashboard', pathMatch: 'full'},
  {path: 'dashboard', component: DashboardComponent,
    children: [
      {path: '', outlet: 'dashboard-outlet', component: MainComponent},
      {path: 'control', outlet: 'dashboard-outlet', component: ControlPanelComponent}
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This works for the following routes:
http://localhost:4200
http://localhost:4200/dashboard

But doesn't for
http://localhost:4200/dashboard/control

When I request for 'dashboard/control' the console log:

NavigationError(id: 2, url: '/dashboard/control', error: Error: Cannot match any routes. URL Segment: 'dashboard/control')

UPDATE:

My app structure is

• app
  • dashboard(where are the left nav with the router links)
    • main
    • control

this is the left nav in the dashboard:

<!-- sidebar menu -->
        <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
          <div class="menu_section">
            <h3>General</h3>
            <ul class="nav side-menu">
              <li><a routerLink="/dashboard" routerLinkActive="active"><i class="fa fa-home"></i>Dashboard</a></li>
              <li><a><i class="fa fa-shield"></i> Options <span class="fa fa-chevron-down"></span></a>
                <ul class="nav child_menu">
                  <li><a [routerLink]="['./control']" routerLinkActive="active">Control Panel</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <!-- /sidebar menu -->

In the page content in the dashboard is the router-outlet

<!-- page content -->
    <div class="right_col" role="main">
      <div class="">
        <div class="page-title">
          <div class="title_left">
            <h3>{{dashboard.pageTitle}}</h3>
          </div>
        </div>

        <div class="clearfix"></div>

        <router-outlet name="dashboard-outlet"></router-outlet>
      </div>
    </div>
    <!-- /page content -->

I can see that the link in the dashboard is rendered correctly:

http://localhost:4200/dashboard/control

But when I click it nothing happens and the console report

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/control'

Any help will be appreciated

Answer 1

Try

[routerLink]="['./control']"

its a child route of /dashboard, put a dot .

Answer 2

you're missing pathMatch: 'full' for your empty path inside your children routes

 children: [
  {path: '', outlet: 'dashboard-outlet', component: MainComponent, pathMatch: 'full'},
  {path: 'control', outlet: 'dashboard-outlet', component: 
    ControlPanelComponent}
  ]
}

Answer 3

To solve the routing problem I just put in the router link the corresponding outlet where the page must be rendered:

<li><a [routerLink]="[{ outlets: { 'dashboard-outlet': ['control'] } }]" routerLinkActive="active">Control Panel</a></li>