Angular2 routing using (2.0.0-rc.5) routing

Question

For the App i'm trying to build, here's how the rouging paths should be:

that is from the app.component is my bootstrap class and it hold links to signin and signup pages. Although the dashboard should be in the same level, it should be visible only when the user is signed up. And in the dashboard component, there are two child components, summary and detailed panels.

here's my routing configurations:

import { Routes, RouterModule } from '@angular/router';
import {SignInComponent} from "./auth/signin.component";
import {SignUpComponent} from "./auth/signup.component";
import {DashboardComponent} from "./dashboard/dashboard.component";
import {PageNotFoundComponent} from "./error/page-not-found.component";
import {UsageInformationComponent} from "./dashboard/usage-information.component";
import {DetailedInformationComponent} from "./dashboard/detailed-info.component";

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/signin',
        pathMatch: 'full'
    },
    {
        path: 'signin',
        component: SignInComponent
    },
    {
        path: 'signup',
        component: SignUpComponent,
    },
    {
        path: 'dashboard',
        component: DashboardComponent
    },
    {
        path: 'summary',
        component: UsageInformationComponent
    },
    {
        path: 'detail',
        component: DetailedInformationComponent
    },
    {
        path: '**',
        component: PageNotFoundComponent
    }
];

export const routing = RouterModule.forRoot(appRoutes);

here's the app.module class:

@NgModule(<NgModuleMetadataType>{
    imports: [
        BrowserModule,
        FormsModule,
        routing
    ],
    declarations: [
        AppComponent,
        SignInComponent,
        SignUpComponent,
        DashboardComponent
        UsageInformationComponent,
        DetailedInformationComponent,
        PageNotFoundComponent
    ],
    providers: [
        HeroService,
        AuthService,
        appRoutingProviders
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

but whenever I tried to access the Summary component, always the corresponding path is not found, hence PageNotFoundComponent is fired. here's the code in dashboard page:

<div class="container-fluid">
    <header class="row spacing">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a routerLink="/summary" routerLinkActive="active">Summary</a></li>
                        <li><a routerLink="/detail" routerLinkActive="active">Summary</a>Detail</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
</div>
<fr-dashboard *ngIf="hasLogin()"></fr-dashboard>
<router-outlet></router-outlet>

To test the routes, I tried to do the following: when the signin button is clicked, page should be redirected to dashboard

signin button:

<button class="btn btn-primary" (click)="performSignIn()">Sign In</button>

navigation:

performSignIn(){
        this._router.navigate(['/dashboard']);
    }

But when click action performed, I get the following message in the browser:

can anyone please let me know what is the issue here. I'm using angular2 version: (2.0.0-rc.5)

Answer 1

If you want summary and detail to be child routes of dashboard you need to define it like child routes:

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/signin',
        pathMatch: 'full'
    },
    {
        path: 'signin',
        component: SignInComponent
    },
    {
        path: 'signup',
        component: SignUpComponent,
    },
    {
        path: 'dashboard',
        component: DashboardComponent,
        children: [
            path: '',
            redirectTo: 'summary',
            pathMatch: 'full'
        },
        {
            path: 'summary',
            component: UsageInformationComponent
        },
        {
            path: 'detail',
            component: DetailedInformationComponent
        },
        ]
    },
    {
        path: '**',
        component: PageNotFoundComponent
    }
];

Answer 2

You seem to have misspelled "Component" as "Comonent". This could be the source of your problem.

This appears here:

{
    path: 'summary',
    component: UsageInformationComonent
},
{
    path: 'detail',
    component: DetailedInformationComonent
},

and here:

UsageInformationComonent,
DetailedInformationComonent,