如何匹配APP MODULE TS中的任何路线与angular2 rc5？

Question

I have a simple angular application and I am using Angular2 for the first time.

I am prompted with error in firefox console "EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: 'books/huckleberry'"

book.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-directory',
  templateUrl: './book.component.html',
  styleUrls: ['./book.component.css']
})
export class BookComponent implements OnInit {

  book: string; 

  constructor(private route: ActivatedRoute) { 

    this.book= route.snapshot.params['book'];

  }

  ngOnInit() {
  }

}

app.routes.ts

import { Routes, RouterModule } from "@angular/router";
import { BookComponent } from "./book/book.component";
import { HomeComponent } from "./home/home.component";

const APP_ROUTES: Routes = [


    {
      path:'book',
      component: BookComponent,
      children: [

        { path: 'book/:book', component: BookComponent}

      ]
    },
    { path: '', component: HomeComponent }

];

export const APP_ROUTES_PROVIDER = RouterModule.forRoot(APP_ROUTES);

app.module.ts

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

import { RouterModule } from "@angular/router";

@NgModule({
  declarations: [
    AppComponent,
    BookComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent },
      { path: 'book', component: BookComponent },
      // { path: '**', component: PageNotFoundComponent }
    ]),

  RouterModule.forChild([
    {
      path: 'book', //parent path
      children: [
        {
          path: 'book/:book', 
          component: BookComponent,
        }
      ]
    }
  ])

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

When i access http://localhost:4200/book, there is no error. But when i access http://localhost:4200/book/huckleberry, using Angular2 for the first time.

I am prompted with error in firefox console "EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: 'book/huckleberry'"

Do you know how can i update app.module.ts?

I should be able to get {{book}} in book.component.html

Answer 1

I was able to solve this by the following codes below:

app.routes.ts const APP_ROUTES: Routes = [

    { path:'directory', component: BookComponent },
    { path:'directory/:book', component: BookComponent },
    { path: '', component: HomeComponent }

];

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    DirectoryComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent },
      { path: 'book', component: BookComponent },
      { path: 'book/:book', component: BookComponent }
      // { path: '**', component: PageNotFoundComponent }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})

With the code above, i am now able to get the parameter and print it to the page via {{book}}