Issue in nested routing in angular2

Question

I have a scenario where I need to load a menu which is built using angular2 routing. Inside a particular component I need to load another menus/tabs which is nothing but a another angular2 routing component. Please find the snapshot of my requirement here

Please find the code for main menu

import {Component, bind} from 'angular2/core';
import {ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES, APP_BASE_HREF, LocationStrategy, RouteParams, ROUTER_BINDINGS} from 'angular2/router';
import {bootstrap}        from 'angular2/platform/browser';

import {ComponentOne} from '../Dashboard/Dashboard1';
import {ComponentTwo} from '../Dashboard/Dashboard2';
import {ReportOne} from '../Reports/Report1';
import {menutopbar} from './menutopbar';
import {leftmenu} from './leftmenu';
import {Clicksenselink} from './clicksenselink';
import {ManageRedisCache} from '../Admin/ManageRedisCache';

@Component({
    selector: 'comp-menu',
    templateUrl: './Menu.html',
    directives: [menutopbar, leftmenu, ManageRedisCache, ROUTER_DIRECTIVES]
   // providers: [ROUTER_PROVIDERS]
})

@RouteConfig([
        { path: '/Dashboard1', name: 'ComponentOne', component: ComponentOne },
        { path: '/Dashboard2', name: 'ComponentTwo', component: ComponentTwo },
        { path: '/Report1', name: 'ReportOne', component: ReportOne },
        { path: '/Clicksenselink', name: 'Clicksenselink', component: Clicksenselink },
        { path: '/ManageRedisCache/...', name: 'ManageRedisCache', component: ManageRedisCache}
])

export class componentmenu {
    constructor() {
        console.log("componentmenu component being called");
    }
}

Please find the code for the child component which internally loads another routing component

import {Component, bind} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, APP_BASE_HREF, LocationStrategy, RouteParams, ROUTER_BINDINGS, RouterOutlet} from 'angular2/router';
import {bootstrap}        from 'angular2/platform/browser';
import {AfterViewInit} from 'angular2/core';   


import {Extractor} from './Extractor';
import {ExtractorQueue} from './ExtractorQueue';
import {Schedule} from './Schedule';
import {DefaultComponent} from './DefaultComponent';


@Component({
    template: `
<div class="container">
    <h2>Redis Administration</h2>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" [routerLink]="['Extractor']">Extractor</a></li>
        <li><a data-toggle="tab" [routerLink]="[ 'ExtractorQueue']">ExtractorQueue</a></li>
        <li><a data-toggle="tab"  [routerLink]="['Schedule']">Schedule</a></li>
    </ul>
    <div class="tab-content">
        <router-outlet></router-outlet>
      </div>
</div>
`,
    directives: [Extractor, ExtractorQueue, Schedule, RouterOutlet]
})

    @RouteConfig
        ([
    { path: '/', name: 'Default', component: DefaultComponent},
    { path: '/Extractor', name: 'Extractor', component: Extractor, useAsDefault: true},
    { path: '/ExtractorQueue', name: 'ExtractorQueue', component: ExtractorQueue },
    { path: '/Schedule', name: 'Schedule', component: Schedule }
])

export class ManageRedisCache
{ }

When I run my application I am getting the following exception in the chrome console

Can't bind to 'routerLink' since it isn't a known native property ("s Administration</h2>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" [ERROR ->][routerLink]="['Extractor']">Extractor</a></li>
        <li><a data-toggle="tab" [routerLink]="[ 'Ext"): ManageRedisCache@4:48
Can't bind to 'routerLink' since it isn't a known native property (" data-toggle="tab" [routerLink]="['Extractor']">Extractor</a></li>
        <li><a data-toggle="tab" [ERROR ->][routerLink]="[ 'ExtractorQueue']">ExtractorQueue</a></li>
        <li><a data-toggle="tab"  [routerL"): ManageRedisCache@5:33
Can't bind to 'routerLink' since it isn't a known native property ("="tab" [routerLink]="[ 'ExtractorQueue']">ExtractorQueue</a></li>
        <li><a data-toggle="tab"  [ERROR ->][routerLink]="['Schedule']">Schedule</a></li>
    </ul>
    <div class="tab-content">
"): ManageRedisCache@6:34 ; Zone: angular ; Task: Promise.then ; Value: BaseExceptionconsoleError @ code.angularjs.org/2.0.0-beta.16/angular2-polyfills.js:487
code.angularjs.org/2.0.0-beta.16/angular2-polyfills.js:489 Error: Uncaught (in promise): Template parse errors:(…)consoleError @ code.angularjs.org/2.0.0-beta.16/angular2-polyfills.js:489

any ideas how to resolve this issue?

Answer 1

you should update to ng2-rc ... anyways , read more https://angular.io/docs/ts/latest/guide/router-deprecated.html

to have nested routing you need to add 3 dots

{ path: '/ManageRedisCache/...'

and have a default route in ManageRedisCache

 { path: '/', name: 'default', component: default},

and add routeroutlet directive in ManageRedisCache