<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ ] bug report
[X] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[ ] bug report
[X] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">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.</p>
<p dir="auto">Example</p>
<p dir="auto">AdminModule<br>
Admin Component (has router-outlet)<br>
SetupComponent<br>
UserModule<br>
UserComponent (has router-outlet)<br>
NewUserComponent</p>
<p dir="auto">Setup URL is /admin/setup and outputs in the admin component router-outlet (good)<br>
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)</p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
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.</p>
<p dir="auto">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.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
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 <a href="https://plnkr.co" rel="nofollow">https://plnkr.co</a> or similar (you can use this template as a starting point: <a href="http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5" rel="nofollow">http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5</a>).</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
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.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">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.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.5 (Router 3.0.0-RC.1)</li>
<li><strong>Browser:</strong> [Chrome XX | Firefox XX | IE XX ]</li>
<li><strong>Language:</strong> [TypeScript 1.8.10]</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[X] feature request"><pre class="notranslate"><code class="notranslate">[X] feature request
</code></pre></div>
<h3 dir="auto">Problem statement:</h3>
<p dir="auto">An app with NgModule structure <code class="notranslate">AppModule</code> -&gt; <code class="notranslate">LabsFormsModule</code> -&gt; <code class="notranslate">TemplateModule</code>, <code class="notranslate">ModelFormControlsModule</code>, <code class="notranslate">ModelFormBuilderModule</code> (3 children)</p>
<p dir="auto">Each child module has defined routes <code class="notranslate">RouterModule.forChild(ROUTES)</code></p>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">Now if these modules are imported in <code class="notranslate">LabsFormsModule</code> then the routes are flattened and they are loaded in <code class="notranslate">router-outlet</code> of <code class="notranslate">AppModule</code>. Whereas the intented behavior is that they be loaded in <code class="notranslate">LabsFormsModule</code>.<br>
Upon discussion on Gitter, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/brandonroberts/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/brandonroberts">@brandonroberts</a> pointed that this is by design because ParentModule and imported modules shares same context.<br>
Also, Only one injector is created for the ParentModule and imports.</p>
<p dir="auto">To achive composition, we need to lazy load each of the three modules, then the hierarchy will be maintained.<br>
But these 3 modules are small and are not fit to be loaded lazily, but hierarchy of modules is needed.</p>
<p dir="auto">Another alternative is, we define Routes on <code class="notranslate">LabsFormsModule</code> to load them in <code class="notranslate">router-outlet</code> of <code class="notranslate">LabsFormsModule</code> but then we need to import component from inside child modules in <code class="notranslate">forms.routes.ts</code> file and add them to the routes. This breaks the module concepts.<br>
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 <code class="notranslate">exports</code>, In short we are forcing internal implementations to be made public just to support Routing defined in Parent module<br>
See: <a href="https://github.com/sirajc/angular2-labs/tree/master/src/app/forms">https://github.com/sirajc/angular2-labs/tree/master/src/app/forms</a></p>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<h3 dir="auto">Proposal: Support Hierarchy of modules</h3>
<ol dir="auto">
<li>While defining child module routes</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="RouterModule.forChild(ROUTES, asChildren /*boolean*/)"><pre class="notranslate"><code class="notranslate">RouterModule.forChild(ROUTES, asChildren /*boolean*/)
</code></pre></div>
<p dir="auto">But this has conflicts with context and injector</p>
<ol dir="auto">
<li>Enable NgModules as children</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{ path: 'forms',
  component: 'FormsComponent',
  childModules: [ TemplateModule, ModelFormControlsModule, ModelFormBuilderModule ]
}"><pre class="notranslate"><code class="notranslate">{ path: 'forms',
  component: 'FormsComponent',
  childModules: [ TemplateModule, ModelFormControlsModule, ModelFormBuilderModule ]
}
</code></pre></div>
<ol dir="auto">
<li>Child imports in Parent Module</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@NgModule({
  imports: [CommonModule],
  children: [TemplateModule, ModelFormControlsModule, ModelFormBuilderModule],
  declarations: [FormsComponent]
})"><pre class="notranslate"><code class="notranslate">@NgModule({
  imports: [CommonModule],
  children: [TemplateModule, ModelFormControlsModule, ModelFormBuilderModule],
  declarations: [FormsComponent]
})
</code></pre></div>
<p dir="auto">Any of the above 3 approach, which seems fit or any other way Angular can provide, that helps creating NgModule hierarchy and routes composition.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
By enabling NgModule as children, we can compose application with NgModule hierarchy without the need for lazy loading each and every module.</p>
<ul dir="auto">
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]</li>
</ul>