I have developed an Angular 5 app and set up the following routing configuration in app-routing.module.ts file:
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 { }
The routing works for the following URLs:
http://localhost:4200
http://localhost:4200/dashboard
However, it does not work for
http://localhost:4200/dashboard/control
When attempting to access 'dashboard/control', I see the following error in the console:
NavigationError(id: 2, url: '/dashboard/control', error: Error: Cannot match any routes. URL Segment: 'dashboard/control')
UPDATE:
The structure of my app is as follows:
- app
- dashboard (contains left navigation with router links)
- main
- control
- dashboard (contains left navigation with router links)
This is the left navigation within the dashboard:
<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>
The content of the page in the dashboard contains a router-outlet:
<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>
While the link on the dashboard appears correct: http://localhost:4200/dashboard/control
Clicking the link results in no action, and the console displays this error message:
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/control'
If anyone can provide assistance, it would be greatly appreciated.