Angular 2 routing does work as expected

Question

I am trying to understand routing in angular 2. I built a really simple application which is all about routing. I am finding it difficult to understand where to place <route-outlet></route-outlet>

The working of the application should be like:

Errors I get on browser console :

EXCEPTION: Error during instantiation of Router! (RouterOutlet -> Router).
Error during instantiation of Router! (RouterOutlet -> Router).
EXCEPTION: Child routes are not allowed for "/home". Use "..." on the parent's route path.
Child routes are not allowed for "/home". Use "..." on the parent's route path.

This is what I have coded so far :

1) LoginComponent

import {Component} from 'angular2/core';

import {RouterLink} from 'angular2/router'; 

@Component({
    selector: 'login',
    template: `
        <h1>Login page</h1>
        <a [routerLink] = "['Home']">Login</a>
        <a [routerLink] = "['Signup']">New user? Sign up now!</a>
`

,
    directives: [RouterLink]
})
export class LoginComponent {

}

2) SignupComponent

import {Component} from 'angular2/core'; 

@Component({
    selector: 'signup',
    template: `
            <h1>Signup page</h1>
            <input type="submit" value="Signup"/>
    `
})
export class SignupComponent {

}

3) HomeComponent

import {Component} from 'angular2/core'; 

import {RouteConfig, RouterLink, RouterOutlet} from 'angular2/router';

import {BookComponent} from './book.component';
import {ContactusComponent} from './contactus.component';

@RouteConfig([
    { path: '/book', name: 'Book', component: BookComponent},
    { path: '/contactus', name: 'Contactus', component: ContactusComponent}
])
@Component({
    selector: 'home',
    template: `
            <h1>Home page</h1>
            <a [routerLink] = "['Book']">Books</a>
            <a [routerLink] = "['Contactus']">Contact us</a>
            <router-outlet></router-outlet>
    `,
    directives: [RouterLink, RouterOutlet]
})
export class HomeComponent {

}

4) BookComponent

import {Component} from 'angular2/core';

@Component({
    selector: 'book',
    template: `
            <h4>List of books</h4>
    `
})
export class BookComponent {

}

5) ContactusComponent

import {Component} from 'angular2/core';

@Component({
    selector: 'contactus',
    template: `
            <h4>Contact us</h4>
    `
})
export class ContactusComponent {

}

5) app.component.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

import {LoginComponent} from './login.component';
import {SignupComponent} from './signup.component';
import {HomeComponent} from './home.component';

@RouteConfig([
    { path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true},
    { path: '/signup', name: 'Signup', component: SignupComponent},
    { path: '/home', name: 'Home', component: HomeComponent},
    { path: '/*other', name: 'Other', redirectTo: ['Login']}
])
@Component({
    selector: 'my-app',
    template: `

            <router-outlet></router-outlet>
        `,
        directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }

6) boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {ROUTER_PROVIDERS} from 'angular2/router'

bootstrap(AppComponent, ROUTER_PROVIDERS);

Answer 1

I found the solution.

app.component is the root app...within it I wanted home.component which further had book.component and contactus.component as its child route

1. As you rightly said, I added ... in app.component like, path:"/home/..."

2. In home.component in the template I fixed my routerlink like, [routerLink]="['./Books']"....note the ./ before the Books....it means that the "Books" is a child route...and same for "Contactus". In home.component's @RouteConfig I mentioned the path without a / like, path: 'books'.

   It worked!! ;)

The code is below :

app.component.ts

import {Component} from 'angular2/core';
import {HomeComponent} from './component/home.component';
import {BooksComponent} from './component/books.component';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

@RouteConfig([
    { path: '/books', name: 'Books', component: BooksComponent},
    { path: '/home/...', name: 'Home', component: HomeComponent}, 
    { path: '/*other', name: 'Other', redirectTo: ['Register']}
])
@Component({
    selector: 'my-app', 
    template: `
            <router-outlet></router-outlet>
        `,
    directives: [ROUTER_DIRECTIVES, HomeComponent, CartComponent]
})

export class AppComponent {}

home.component.ts

import {Component} from 'angular2/core';

import {RouteConfig ,ROUTER_DIRECTIVES} from 'angular2/router';

import {BooksComponent} from './books.component';
import {ContactusComponent} from './contactus.component';

@RouteConfig([
    { path: 'books', name: 'Books', component: BooksComponent, useAsDefault: true},
    { path: 'contactus', name: 'Contactus', component: ContactusComponent}
])
@Component({
    selector: 'home',
    template: `

      <a [routerLink]="['./Books']">Buy books</a>
      <a [routerLink]="['./Contactus']">Contact us</a>
      <router-outlet></router-outlet>

`,
    directives: [ROUTER_DIRECTIVES, BooksComponent, ContactusComponent]
})
export class HomeComponent {}

Answer 2

As the error message tells add ... to indicate that the routed component has child routes

{ path: '/home/...', name: 'Home', component: HomeComponent},