Child level routes not working

Question

My Menu provider is as below

export const routes: RouterConfig = [
    { path: '', component: Dashboard1 },
    { path: 'Dashboard2', component: Dashboard2 },
    { path: 'Report1', component: Report1 },
    { path: 'Report2', component: Report1 },
    {
        path: 'ManageRedisCache',               //Child level menus
        component: ManageRedisCache,
        children: [
            { path: '', component: ExtractorQueue },  
            { path: 'Extractor', component: Extractor },
            { path: 'Schedule', component: Schedule },
            { path: 'CacheVisualization', component: CacheVisualization}
        ]
    }
];

First level menu html template as the following html link which loads the second level menus

 <ul>
                    <li class="teamMate">
                        <a [routerLink]="['/ManageRedisCache']"><h4>Manage Redis Cache</h4></a>
                    </li>
                </ul>

ManageRedisCache component has the html template as below where second level routes are specified

 <div class="container">
    <h2>Redis Administration</h2>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" [routerLink]="['/']">ExtractorQueue</a></li>
        <li><a data-toggle="tab" [routerLink]="['/Extractor']">Extractor</a></li>
        <li><a data-toggle="tab" [routerLink]="['/Schedule']">Schedule</a></li>
        <li><a data-toggle="tab" [routerLink]="['/CacheVisualization']">Cache Visualization</a></li>
    </ul>
    <div class="tab-content">
        <router-outlet></router-outlet>
    </div>
</div>

I have defined the child route as above and the child level default route i.e. ExtractorQueue works fine on load/click of "ManageRedisCache" link. On the first load it loads the component "ExtractorQueue" but on navigating to other child routes like "Extractor,Schedule,CacheVisualization" it doesnot works fine. None of the other routing links like "Extractor,Schedule,CacheVisualization" seems to work or even clickable. I am getting the following error in the browser console

zone.js:461 Unhandled Promise rejection: Cannot match any routes: 'Extractor' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: 'Extractor'
    at Observable.eval [as _subscribe] (http://localhost:49928/lib/@angular/router/src/apply_redirects.js:37:34)
    at Observable.subscribe (http://localhost:49928/lib/rxjs/Observable.js:52:62)
    at Observable._subscribe (http://localhost:49928/lib/rxjs/Observable.js:109:28)
    at MergeMapOperator.call (http://localhost:49928/lib/rxjs/operator/mergeMap.js:75:23)
    at Observable.subscribe (http://localhost:49928/lib/rxjs/Observable.js:52:38)
    at Observable._subscribe (http://localhost:49928/lib/rxjs/Observable.js:109:28)
    at MergeMapOperator.call (http://localhost:49928/lib/rxjs/operator/mergeMap.js:75:23)
    at Observable.subscribe (http://localhost:49928/lib/rxjs/Observable.js:52:38)
    at Observable._subscribe (http://localhost:49928/lib/rxjs/Observable.js:109:28)
    at MapOperator.call (http://localhost:49928/lib/rxjs/operator/map.js:54:23)consoleError @ zone.js:461
zone.js:463 Error: Uncaught (in promise): Error: Cannot match any routes: 'Extractor'
    at resolvePromise (http://localhost:49928/lib/zone.js/dist/zone.js:538:32)
    at http://localhost:49928/lib/zone.js/dist/zone.js:515:14
    at ZoneDelegate.invoke (http://localhost:49928/lib/zone.js/dist/zone.js:323:29)
    at Object.onInvoke (http://localhost:49928/lib/@angular/core/bundles/core.umd.js:9100:45)
    at ZoneDelegate.invoke (http://localhost:49928/lib/zone.js/dist/zone.js:322:35)
    at Zone.run (http://localhost:49928/lib/zone.js/dist/zone.js:216:44)
    at http://localhost:49928/lib/zone.js/dist/zone.js:571:58
    at ZoneDelegate.invokeTask (http://localhost:49928/lib/zone.js/dist/zone.js:356:38)
    at Object.onInvokeTask (http://localhost:49928/lib/@angular/core/bundles/core.umd.js:9091:45)
    at ZoneDelegate.invokeTask (http://localhost:49928/lib/zone.js/dist/zone.js:355:43)

Answer 1

The router links shouldn't contain leading slashes for child routes.

 <div class="container">
<h2>Redis Administration</h2>
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" [routerLink]="['./']">ExtractorQueue</a></li>
    <li><a data-toggle="tab" [routerLink]="['Extractor']">Extractor</a></li>
    <li><a data-toggle="tab" [routerLink]="['Schedule']">Schedule</a></li>
    <li><a data-toggle="tab" [routerLink]="['CacheVisualization']">Cache Visualization</a></li>
</ul>
<div class="tab-content">
    <router-outlet></router-outlet>
</div>

The leading slash tells the router to look for the route starting at the root. Without the leading slash (or with a './'), the router looks for the route starting with the current component's children. This is not in the official docs, you have to read through the code to find this gem:

/**
 * The RouterLink directive lets you link to specific parts of your app.
 *
 * Consider the following route configuration:

 * ```
 * [{ path: '/user', component: UserCmp }]
 * ```
 *
 * When linking to this `User` route, you can write:
 *
 * ```
 * <a [routerLink]="['/user']">link to user component</a>
 * ```
 *
 * RouterLink expects the value to be an array of path segments, followed by the params
 * for that level of routing. For instance `['/team', {teamId: 1}, 'user', {userId: 2}]`
 * means that we want to generate a link to `/team;teamId=1/user;userId=2`.
 *
 * The first segment name can be prepended with `/`, `./`, or `../`.
 * If the segment begins with `/`, the router will look up the route from the root of the app.
 * If the segment begins with `./`, or doesn't begin with a slash, the router will
 * instead look in the current component's children for the route.
 * And if the segment begins with `../`, the router will go up one level.
 */