In the case you have a root router config with a route with path "/...", linked to a component with his own child router config has in the following example :

@Component({
    selector: 'app'
})
@View({
    template: 'app.html',
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: '/...', as: 'SubApp', component: SubApp},
    {path: '/login', as: 'Login', component: Login},
])
class App {
}

@Component({
    selector: 'subapp'
})
@View({
    templateUrl: 'sub.html',
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: '', as: 'Home', component: Home},
    {path: '/whatever', as: 'Whatever', component: Whatever}
])
export class Trainer {
}

With this config, pointing your browser on "/" or simply "" points to the Home route. "/login" on Login, "/whatever" on Whatever. This structure allows to put some header in the sub.html file which doesn't appears when you access the login route.

It works very well, except the part where the commit method of the RootRouter class make the emitPath object to get prefixed with a / when it's not empty. But in that case, the empty path the SubApp root already add it every time, making it appearing twice when the state is pushed in the history. This consequently makes it fail.

I fixed it by extending the if statement with a verification of the said slash at the beginning of the path. I'm creating a pull request right away.