Today I built a routing mechanism which included 4 level of child route. It looks like this

MainComponent > FrontComponent > AboutComponent > AboutPageComponent

AboutPageComponent has actual view to be show to the user.

Being said that, below are the route configurations for every component.

MainComponent has
@RouteConfig([
{ name: 'Home',path: '/...',component: FrontComponent,useAsDefault: true }
])

FrontComponent has
@RouteConfig([
{ name: 'Home',path: '/...',component: HomeComponent,useAsDefault: true },
{ name: 'About',path: 'about/...',component: AboutComponent}
])

AboutComponent has
@RouteConfig([
{name: 'AboutPage', path:'/', component: AboutPageComponent,useAsDefault: true},
])

Now I face 2 problems with this structure :

1) RouteLink Problem in HTML

using [routerLink] to AboutPage in the template attached with MainComponent with produce error.

Here is the error:
Component "MainComponent" has no route named "AboutPage". in [['AboutPage'] in MainComponent

2) Route Problem on page refresh

When I navigate to http://localhost:5555/dist/dev/#/about the page comes up. Work fine.Happy.
However when I refresh the page the URL changes to http://localhost:5555/dist/dev/#//about (observer double slash in the url before about automatically appended). Strange!!!
Next, when I refresh the page for second time the application redirects to http://localhost:5555/dist/dev/ . Even more Strange behavior!!!

Kindly advice, If I am going wrong somewhere.