2

I am a bit lost whether I am approaching my problem correctly or not, or this is simply an issue with the RC1 version of the new router.

I have an ApplicationComponent that serves as the entrypoint. 

@Routes([
    {path: '/ingredients', component: IngredientComponent},
])

The IngredientComponent then defines routes on its own:

@Routes([
     {path: '/', component: IngredientListComponent},
     {path: '/:id', component: IngredientDetailComponent}
])

To further split the view into a overview and a detail-view. This works well when navigating through the app.

However, when reloading the page Angular seems unable to properly match the URL to the nested child routes. If I refresh the page while being on "/ingredients/1" the following error occurs:

Current segment: '2'. Available routes: ['/ingredients']

"/ingredients" works fine, whereas "/ingredients/" suffers from the same fate.

Any pointers on how I can fix this? Or is this a wrong approach in general and should I declare all routes in the ApplicationComponent?

Addition: I know about this particular issue and have already injected the Router.

Elysium
  • 155
  • 1
  • 10

1 Answers1

2

This might not fix your problem but currently the order of routes is significant (should be fixed soon) (here to stay)

The less specific routes should come last:

@Routes([
     {path: '/:id', component: IngredientDetailComponent}
     {path: '/', component: IngredientListComponent},
])

See also Angular 2.0 router not working on reloading the browser

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567