0

I'm working on an Angular2 application, and I noticed that child routes do not extend from their parent routes. Is this by design?

For example, if I have a parent router with routes configured like so:

// In top-level component

router.config([
   new AsyncRoute({
       path: '/designer/:id',
       name: 'Designer',
       loader: () => 
           System.import('app/components/design.component')
                 .then(c => c['DesignComponent'])
   }),
   new AsyncRoute({
       path: '/planner/:id',
       name: 'Planner',
       loader: () => 
           System.import('app/components/plan.component')
                 .then(c => c['PlanComponent'])
   })
]);

And child router and routes defined in either of these components like so:

// In child component, design.component for example

router.config([
   new AsyncRoute({
       path: '/model',
       name: 'Model',
       loader: () => 
           System.import('app/design/components/model.component')
                 .then(c => c['ModelComponent'])
   })
]);

When the top-level page is loaded we might land on http://localhost:5000/designer/10 for example, but when navigating to a child route the URL ends up being http://localhost:5000/model instead of http://localhost:5000/designer/10/model.

Expected:

http://localhost:5000/designer/10/model

Actual:

http://localhost:5000/model
David Pine
  • 23,787
  • 10
  • 79
  • 107

1 Answers1

-1

If a route has child routes, then the path needs to end with /...

new AsyncRoute({
       path: '/designer/:id/...',
       name: 'Designer',
       loader: () => 
           System.import('app/components/design.component')
                 .then(c => c['DesignComponent'])

This might also be caused by async routes. The full URL can only resolved after the child components are loaded. This has changed in the new router in Angular2 rc.0

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • I tried this and it's not working. In fact it doesn't navigate at all. Does it matter that the parent router is setup without the use of `[routeLink]`? Also, what is changed in RC.0? How would I navigate to a route with the `/...` at the end with the `router.navigate`? – David Pine May 06 '16 at 14:55
  • Can you create a Plunker that allows to reproduce? – Günter Zöchbauer May 06 '16 at 14:57
  • I don't understand what you mean by "does it matter that the parent router is setup without the use of [routeLink]". In RC.0 there are no route names anymore. Only path and component. All routes are async AFAIK (not sure). When you navigate you pass an element for each level `['/Parent, {id: 'someId'}, 'Child']` – Günter Zöchbauer May 06 '16 at 15:10
  • What is the URL is changed via `window.location.href`, or the user opens a new tab or window and enters the URL? `localhost:5000//design/10/model` does nothing – David Pine May 06 '16 at 16:13
  • Is HTML5 pushState enabled on your server? http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser – Günter Zöchbauer May 06 '16 at 16:14