Angular 2 Nested Routes using @Routes

Question

I'm trying to do something seemingly simple. I have the following defined:

@Routes([
    { path: '/stores', component: StoresComponent },
    { path: '/stores/new', component: StoresCreateComponent}
])

When I navigate to /stores I display a list of existing stores. I have a link on that page to navigate to a screen to create a new store. However, when I navigate to /stores/new , I get the following:

browser_adapter.ts:78Error: Uncaught (in promise): Component 'StoresComponent' does not have route configuration

I'm pretty new to Angular so I'm not entirely sure what I need to do in order to get a route like that working.

Answer 1

Order routes so that more specific ones come first and less specific ones last. That's a current limitation of the RC.1 router.

@Routes([
    { path: '/stores/new', component: StoresCreateComponent}
    { path: '/stores', component: StoresComponent },
])