angular - Routing redirecting to root -

i trying route using router.navigate method. followed instructions letter, when route via api, reloading root page.

in rootcomponent trying use

this._router.navigate(['abc', 'page1']); should redirect me application/abc/xyz

but if directly visit application/abc/xyz through browser, working seamlessly

app.component.ts

import {component} "angular2/core"; import {routeconfig, router_directives, router_providers} "angular2/router"; import {rootcomponent} "./components/root.component"; import {page1component} "./components/page1.component";   @component({     selector: 'app',     template: '<router-outlet></router-outlet>',     directives: [router_directives],     providers: [         router_providers     ] })  @routeconfig([     {         path: '',         name: 'root',         component: rootcomponent,         useasdefault: true     },     {         path: '/abc/...',         name: 'abc',         component: abccomponent     } ])  export class appcomponent { } 

abccomponent

@component({     selector: 'abc',     template: '<router-outlet></router-outlet>',     directives: [router_directives] })  @routeconfig([     {         path: '/xyz',         name: 'page1',         component: page1component     } ]) export class abccomponent{      constructor(private _router:router){     }  } 

page1component

import {component} "angular2/core"; import {router} "angular2/router";  @component({     selector: 'page1',     template: '<h1>page1</h1>' })  export class page1component{      constructor(private _router:router){     } } 

what doing wrong?

edit

to explain simpler terms

                              application (2 routes @ root level)                                   |                        |            default ("/") - root component              /abc/ abc component                                                            |                                                        /abc/xyz page1 component 

what trying is, navigate page1 root component.

solution

after reverse enineering s.alem plunkr, here solution

http://plnkr.co/edit/f1p6aqnj7lrehcivnkep?p=preview

try using main router (router of appcomponent). can such method:

getmainrouter(router?: router):router {   if (router.parent === null) {     return router;   }   return this.getmainrouter(router.parent); } 

so rootcomponent can this:

// imports...  @component({     selector: 'root',     template: '<h1>root component</h1>' })  export class rootcomponent{      private _mainrouter: router;      constructor(private _router:router){         this._mainrouter = this.getmainrouter(this._router);     }      routetosomewhere():void {         this._mainrouter.navigate(['./abc', 'page1']);     }      private getmainrouter(router?: router):router {         if (router.parent === null) {             return router;         }         return this.getmainrouter(router.parent);     } } 

here plunker show. forked hero tutorial, can see related codes if fallow route config of appcomponent. launch plunker on separate window see browser url.