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

【问题标题】：Angular children routes in Lazy Loaded module don't completely work延迟加载模块中的 Angular 子路由不能完全正常工作
【发布时间】：2017-05-11 21:35:17
【问题描述】：

我正在使用 Angular 2.3.1

我在延迟加载模块中导航到子路由时遇到问题。对我来说很奇怪的是 3 条儿童路线中有 2 条运行良好。但是当我尝试添加第三条路线时，这条特定路线似乎不起作用。

因为某些路由正在运行，您可能会认为与命运多舛的路由相关的组件有问题...但我不认为是这种情况...该组件只是简单的类和模板.里面什么都没有：

这是我的根应用路由

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 路由移到:id 路由上方以查看结果可能是什么？等等...您是否遇到了客户端（Angular）路由或服务器端（API）路由的问题？
@R.Richards 等等什么？！为什么这行得通。你能解释一下吗？
有效吗？我认为顺序是一个问题，因为需要参数（id）的路由在保存的路由之前。也许路由器不喜欢那样。我在路由方面遇到了一些问题，所以这是一个猜测。我会再问：这是客户端或服务器路由的问题吗？因为如果这是服务器路由问题，我的建议不适用。然后我们需要查看您的服务器路由配置。
@R.Richards 您的建议确实有效。谢谢...并清除客户端与服务器路由的混淆...这一切都在客户端上。不过，我仍然对您的建议有效的原因感到困惑。
我只能说顺序是 Angular 路由的一个因素。路由器认为任何试图去saved 路由的东西都在:id 路由处停止，因为路由器认为术语“保存”只是传递给它的另一个参数。这有帮助吗？

标签： angular angular2-routing

【解决方案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 路由处停止，因为路由器认为术语“保存”只是传递给它的另一个参数。

【讨论】：