Angular2路由抛出404错误

Question

我的 Angular2 应用程序中的导航非常简单，所以我很惊讶为什么会出现错误 404.As 您可以看到注入了负责显示项目详细信息的 ItemDetails 组件。这里是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 },
];

Angular2路由抛出404错误

Angular2 route throw 404 error

angular2-routing

angular