Angular2 路由，父子节点——路由组件 vs 视图组件

Question

I'm working on an Angular2 application, currently we're on beta-17 since the release candidate no longer supported bundling and broke everything (that's another story).

I understand that the relationship between parent and child routes are expected to be that the child must be a "routing component" if it wants to have routes. That makes sense, right -- but what if I want to have a parent "routing component", that has a child "view component" which acts as a parent to a child "routing component"?

.
├── app.component // Has two child routes, both are "view components"
     ├── plan.component
     └── design.component // View component, route "/design/:id/..."
         ├── header.component
         ├── nav-and-body.component // Routing component
         └── footer.component

I have a top-level app that has two routes, the /plan/:id/... and /design/:id/... routes. As you can see I have a desire that these will serve as parents to other "routing components". Imagine we're in the "design" route, and we attempt to navigate to a child route defined in the NavAndBodyComponent it doesn't work, nor does it throw an error.

I believe this is due to the fact that I have a parent "routing component", that has a child "view component", which has a nested "routing component" - how can I fix this without changing this hierarchy?

The view components load as expected:

URL: localhost:5000/design/10

But when I attempt navigation to the nested child route the URL changes to

URL: localhost:5000/model

I want (and expected):

URL: localhost:5000/design/10/model

Update

Here is a very detailed Plunker !

Answer 1

The problem is caused by adding ROUTER_PROVIDERS on a component other than the root component.

Plunker example

How to prevent adding dynamically added routes each time a route is activated see Angular2: Configuration 'name' conflicts with existing route 'name'