Issue 1:
I'm submitting a ... (check one with "x")

[ ] bug report
[X] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

If I define a module fully, with it's own routes and components and then apply that module as a child of a module intended to be the parent module, the routes still act independently.

Example

AdminModule

Admin Component (has router-outlet)

SetupComponent

UserModule

UserComponent (has router-outlet)

NewUserComponent

Setup URL is /admin/setup and outputs in the admin component router-outlet (good)

New User URL is /user/new-user and it outputs in the User components router-outlet which ends up the main app-component router-outlet instead of the admin component. (bad)

Expected/desired behavior

In the example above, the desire would be that my route would be /admin/user/new-user and that the user component would load in the router-outlet of the admin component, rather than on it's own.

Basically, I want to be able to navigate to components of child modules as though they were defined as child routes of the parent modules routing configuration. Prior to moving my app to modules, I would just stack route definitions and import the child routes (with children of their own) in the higher level route configs. I realize I could expand my definition of modules, making the user components part of the admin module, but for separation I'd rather not do that.

Reproduction of the problem

If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).

What is the expected behavior?

I'm not sure what the expected behavior is, I'm assuming that the way it acts is correct according to the current design of the routing and module systems.

What is the motivation / use case for changing the behavior?

My application is intended to be a composition of multiple modules. Each of those modules is intended to be able to stand on it's own, as they are re-used in other sibling applications in different ways. That said, once composed, the routes and outlets should make reasonably good sense to both the end users and developers. I shouldn't have to change the definitions of my modules to get them to stack appropriately.

Please tell us about your environment:

Angular version: 2.0.0-rc.5 (Router 3.0.0-RC.1)

Browser: [Chrome XX | Firefox XX | IE XX ]

Language: [TypeScript 1.8.10]

Issue 2:
I'm submitting a ...

[X] feature request

Problem statement:

An app with NgModule structure AppModule -> LabsFormsModule -> TemplateModule, ModelFormControlsModule, ModelFormBuilderModule (3 children)

Each child module has defined routes RouterModule.forChild(ROUTES)

Current behavior

Now if these modules are imported in LabsFormsModule then the routes are flattened and they are loaded in router-outlet of AppModule. Whereas the intented behavior is that they be loaded in LabsFormsModule.

Upon discussion on Gitter, @brandonroberts pointed that this is by design because ParentModule and imported modules shares same context.

Also, Only one injector is created for the ParentModule and imports.

To achive composition, we need to lazy load each of the three modules, then the hierarchy will be maintained.

But these 3 modules are small and are not fit to be loaded lazily, but hierarchy of modules is needed.

Another alternative is, we define Routes on LabsFormsModule to load them in router-outlet of LabsFormsModule but then we need to import component from inside child modules in forms.routes.ts file and add them to the routes. This breaks the module concepts.

Components inside child modules are not public and should not be accessed outside of Module. also to be addressable outside of module, components needs to be added to exports, In short we are forcing internal implementations to be made public just to support Routing defined in Parent module

See: https://github.com/sirajc/angular2-labs/tree/master/src/app/forms

Expected/desired behavior

Proposal: Support Hierarchy of modules

While defining child module routes

RouterModule.forChild(ROUTES, asChildren /*boolean*/)

But this has conflicts with context and injector

Enable NgModules as children

{ path: 'forms',
component: 'FormsComponent',
childModules: [ TemplateModule, ModelFormControlsModule, ModelFormBuilderModule ]
}

Child imports in Parent Module

@NgModule({
imports: [CommonModule],
children: [TemplateModule, ModelFormControlsModule, ModelFormBuilderModule],
declarations: [FormsComponent]
})

Any of the above 3 approach, which seems fit or any other way Angular can provide, that helps creating NgModule hierarchy and routes composition.

What is the motivation / use case for changing the behavior?

By enabling NgModule as children, we can compose application with NgModule hierarchy without the need for lazy loading each and every module.

Language: [all | TypeScript X.X | ES6/7 | ES5]