Angular2ルートスロー404エラー

Question

私は私のAngular2アプリケーションでは非常にシンプルなナビゲーションを持っているので、私はあなたがアイテムの詳細を示すための責任が注入されItemDetailsコンポーネントを参照することができ、エラー404.Asを取得していますなぜ私は驚きました。ここmain.ts構成は次のとおりです。

import {NgModule} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {FormsModule} from '@angular/forms' 
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 
import {App} from './app'; 
import {HttpModule} from '@angular/http'; 
import {MdlModule} from 'angular2-mdl'; 
import {RouterModule, Routes} from '@angular/router'; 
import {Main} from './app/containers'; 
import {DataService} from './app/services/data-service'; 
import { 
    AppBar, 
    ShortSearch, 
    Authorization, 
    Search, 
    CollapseOnClick, 
    ItemsList, 
    ItemDetails, 
    NavigationBar, 
    SortByPricePipe, 
    PageNotFound 
} from './app/components'; 

const appRoutes: Routes = [ 
    { path: '', component: ItemsList }, 
    { path: '**', component: PageNotFound }, 
    { path: 'search', component: Search }, 
    { path: 'item/:id', component: ItemDetails } 
]; 

@NgModule({ 
    declarations: [ 
     App, 
     Main, 
     AppBar, 
     ShortSearch, 
     Authorization, 
     Search, 
     CollapseOnClick, 
     ItemsList, 
     ItemDetails, 
     NavigationBar, 
     SortByPricePipe, 
     PageNotFound 
    ], 
    imports: [BrowserModule, 
     FormsModule, 
     HttpModule, 
     MdlModule, 
     RouterModule.forRoot(appRoutes) 
    ], 
    bootstrap: [App], 
    providers: [DataService] 
}) 
export class AppModule { 
} 

platformBrowserDynamic().bootstrapModule(AppModule); 

Answer 1

は、常にその前に、あなたのappRoutesアレイと''で'**'あなたの最後のパスを作る：

const appRoutes: Routes = [ 
    { path: 'search', component: Search }, 
    { path: 'item/:id', component: ItemDetails } 
    { path: '', component: ItemsList }, 
    { path: '**', component: PageNotFound }, 
];