typescript - Angular 5: Nije moguće podudariti nijednu rutu

Napravio sam Angular 5 aplikaciju i definirao sljedeći 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 { }

Ovo radi za sljedeće rute:
http://localhost:4200
http://localhost:4200/dashboard

Ali ne za
http://localhost:4200/dashboard/control

Kad zatražim 'dashboard/control', zapisnik konzole:

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

AŽURIRANJE :

Struktura moje aplikacije je

• aplikacija

  • nadzorna ploča (gdje je lijeva navigacija s linkovima rutera)

    • glavni
    • nadzorna ploča (gdje se nalazi lijeva navigacija s poveznicama rutera)
    • glavno

    • kontrola

ovo je lijeva navigacija na nadzornoj ploči:

<!-- 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 -->

U sadržaju stranice na upravljačkoj ploči je 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 -->

Mogu vidjeti da je poveznica na nadzornoj ploči ispravno prikazana:

http://localhost:4200/dashboard/control

Ali kad ga kliknem ništa se ne događa i konzola prikazuje izvještaj

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

Bilo kakva pomoć će biti cijenjena

Odgovor #1

Pokušaj

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

to je podruta /dashboard, stavite točku .

Odgovor #2

nedostaje ti pathMatch: 'full' za tvoj prazan put unutar tvojih dječjih ruta

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