Angular2 nested routing incorrect URL

Question

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

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2016-05-06T14:29:23

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

Angular2 nested routing incorrect URL

1 Answers