2017-03-22 52 views
1

我有相當簡單的導航在我Angular2的應用程序,所以我不覺得奇怪,爲什麼我得到錯誤404.As你可以看到,負責顯示項目的詳細信息被注入ItemDetails組件。這裏是main.ts配置:
Angular2航線拋出404錯誤

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); 

回答

2

總是讓你appRoutes陣列中'''**'您的最後一個路徑前:

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