Angular 延迟加载模块中的子路由不能完全工作

Question

我正在使用 Angular 2.3.1

我无法导航到惰性加载模块中的子路由。对我来说非常奇怪的是，3 条儿童路线中有 2 条运行完美。但是当我尝试添加第三条路线时，那条特定路线似乎不起作用。

因为某些路由正在运行，您会认为这是与命运多舛的路由相关联的组件的问题...但我不认为是这种情况...该组件只是骨架 class & 模板。里面什么都没有:

这是我的根应用程序路由

const routes: Routes = [
  {path:'', component: HomePageComponent},
  {
    path: 'facilities',
    loadChildren: './search-page/search-page.module#SearchPageModule'
  },
]

@NgModule({
    imports: [RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})],
    exports: [RouterModule],
    providers: []
})

这是我的模块路由，我在其中创建子路由。

const searchPageRoutes : Routes = [
    {
        path: '',
        component: SearchPageComponent,
        children: [
            {
                path:'search', // ROUTE WORKS
                component: SearchResultsComponent,
                canActivate: [FacilitiesGuard]
            },
            {
                path: ':id', // ROUTE WORKS
                component: FacilityDetailComponent,
                resolve: {facility:  FacilityDataResolver }
            },
            {
                path: 'saved', // ROUTE NOT WORKING
                component: FacilitiesListComponent
            }
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(searchPageRoutes)
    ],
    exports:[
        RouterModule
    ]
})

错误我得到的错误与我一起删除路线时发生的错误相同......就好像路线甚至没有被定义一样。 Angular 尝试使用以下路由进行后端 API 调用：

http://localhost:8080/api/facilities/saved (500) Internal server Error

发生此错误是因为 API 中不存在此路由。

我做错了什么或者为什么 angular 找不到 'saved' 路由？

Answer 1

根据评论对话回答：

这里的问题是配置中路由的顺序。

这个：

{
    path: ':id', // ROUTE WORKS
    component: FacilityDetailComponent,
    resolve: {facility:  FacilityDataResolver }
},
{
    path: 'saved', // ROUTE NOT WORKING
    component: FacilitiesListComponent
}

需要这样：

{
    path: 'saved', // ROUTE WORKING NOW!
    component: FacilitiesListComponent
},
{
    path: ':id', // ROUTE STILL WORKS
    component: FacilityDetailComponent,
    resolve: {facility:  FacilityDataResolver }
}

本质上，路由器认为任何试图去 saved 路由的东西都在 :id 路由处被阻止了，因为路由器认为 "saved" 只是另一个参数传递给它。

Angular 延迟加载模块中的子路由不能完全工作

Angular children routes in Lazy Loaded module don't completely work

angular2-routing

angular