2017-03-22 53 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 }, 
];