Angular2 Default Route View

Question

I'm defining all my routes in app.ts

@RouteConfig([
    { path: '/dashboard/...', component: Dashboard, name: 'Dashboard', useAsDefault: true }
)

On the dashboard, I have some nested routes relative to the dashbaord.
dashboard.ts

@Component({
    template: `<h1>this is dashboard default text</h1>
               <router-outlet></router-outlet>`
});
@RouteConfig([
    { path: '/cmp1' , name: 'Cmp1' , component: cmp1}
    { path: '/cmp2' , name: 'Cmp2' , component: cmp2}
)

Now, If I go to the root url(i.e '/') it'll redirect me to /dashboard since it's the default one(but doesn't show cmp1/cmp2 yet, since I haven't click on the link on the dashboard yet).
But, if I try to visit /dashboard directly it shows a blank page.

I want the view of the dashboard to be shown when I access /dashboard directly(i.e from the browser address bar and without the child component views). It should behave as if I'm visiting root url /.
How can I achieve that?

Answer 1

You can use your now dashboard as a parent for actual default dashboard as illustrated below (almost similar to Günter's, and I also have mine like this)

app.ts

@RouteConfig([
    { path: '/dashboard/...', component: Dashboard, name: 'Dashboard', useAsDefault: true }
)

---

dashboard.ts

@Component({
    template: `<h1>this is dashboard text for all child routes
                    including default dashboard.
               </h1>
               <router-outlet></router-outlet>`
});
@RouteConfig([
    { path: '/' , name: 'DashDefault' , component: DashDefaultCmp, useAsDefault: true},
    { path: '/cmp1' , name: 'Cmp1' , component: cmp1},
    { path: '/cmp2' , name: 'Cmp2' , component: cmp2}
)

---

dashDefaultCmp.ts

(keep it empty if you want)

@Component({
        template: `<h1>this is your default dashboard.
                   </h1>`
    });
export class DashDefaultCmp{
}

hope this helps :)