Routing redirecting to root
<p>I am trying to route using <code>Router.navigate</code> method. I followed the instructions to the letter, but when I route via API, its reloading the root page.</p>

<p>In my <code>RootComponent</code> I am trying to use  </p>

<blockquote>
  <p>this._router.navigate(['ABC', 'Page1']); which should redirect me to application/abc/xyz</p>
</blockquote>

<p>But if I directly visit <code>application/abc/xyz</code> through my browser, it is working seamlessly</p>

<p><strong>app.component.ts</strong></p>

<pre><code>import {Component} from "angular2/core";
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from "angular2/router";
import {RootComponent} from "./components/root.component";
import {Page1Component} from "./components/page1.component";


@Component({
    selector: 'app',
    template: '&lt;router-outlet&gt;&lt;/router-outlet&gt;',
    directives: [ROUTER_DIRECTIVES],
    providers: [
        ROUTER_PROVIDERS
    ]
})

@RouteConfig([
    {
        path: '',
        name: 'Root',
        component: RootComponent,
        useAsDefault: true
    },
    {
        path: '/abc/...',
        name: 'ABC',
        component: ABCComponent
    }
])

export class AppComponent {
}
</code></pre>

<p><strong>ABCComponent</strong></p>

<pre><code>@Component({
    selector: 'abc',
    template: '&lt;router-outlet&gt;&lt;/router-outlet&gt;',
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
    {
        path: '/xyz',
        name: 'Page1',
        component: Page1Component
    }
])
export class ABCComponent{

    constructor(private _router:Router){
    }

}
</code></pre>

<p><strong>Page1Component</strong></p>

<pre><code>import {Component} from "angular2/core";
import {Router} from "angular2/router";

@Component({
    selector: 'page1',
    template: '&lt;h1&gt;Page1&lt;/h1&gt;'
})

export class Page1Component{

    constructor(private _router:Router){
    }
}
</code></pre>

<p>What am I doing wrong?</p>

<p><strong>EDIT</strong></p>

<p>To explain it even simpler terms</p>

<pre><code>                              Application (2 routes at root level)
                                  |                        |
           Default ("/") - Root Component              /abc/ ABC Component
                                                           |
                                                       /abc/xyz Page1 Component
</code></pre>

<p>What I am trying to do is, navigate to Page1 from Root Component.</p>

<p><strong>Solution</strong></p>

<p>After Reverse enineering from S.alem plunkr, here is the solution</p>

<p><a href="http://plnkr.co/edit/F1p6aQNJ7lREHCiVnKEP?p=preview" rel="nofollow">http://plnkr.co/edit/F1p6aQNJ7lREHCiVnKEP?p=preview</a></p>