延迟加载模块中的角子级路由无法完全正常工作

Question

I am using Angular 2.3.1

I having trouble navigating to children routes in a lazy loaded module. What is very odd to me is that 2 of 3 children routes are working perfect. But when I tried to add a 3rd route, it's that particular route that doesn't seem work.

Because some routes are working, you would think it's a problem with the component that's associated with the ill fated route...but I don't believe this is the case...The component is just bare bones class & template. There's nothing in it:

Here is my Root App Routing

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: []
})

Here is my module routing , where I'm creating children routes.

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
    ]
})

ERROR The error I'm getting is the same error that occurs if I remove the route all together...as if the route is not even being defined. Angular tries to make a backend API call with the route:

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

This error occurs because this route doesn't exist in the API.

What am I doing wrong or why is the 'saved' route not being found by angular?

Answer 1

Answer based on comment conversation:

The issue here is the order of the routes in the configuration.

This:

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

Needs to be this:

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

Essentially, the router thinks that anything trying to go to the saved route was stopped at the :id route, because the router is thinking that the term "saved" was just another parameter be passed to it.