<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>
<p dir="auto">Feature request to support selectors like</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="md-input-container &gt; input"><pre class="notranslate"><code class="notranslate">md-input-container &gt; input
</code></pre></div>
<p dir="auto">This would help reduce boilerplate for directives where some predetermined structure is required. Some scenarios where this could be useful:</p>
<ul dir="auto">
<li>The Angular Material <code class="notranslate">md-input-container</code> (example used above)</li>
<li>Any instance where native HTML elements dictate a specific structure, e.g., <code class="notranslate">&lt;table&gt;</code> containing <code class="notranslate">&lt;tr&gt;</code></li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="myCustomTable &gt; tr"><pre class="notranslate"><code class="notranslate">myCustomTable &gt; tr
</code></pre></div>
<p dir="auto">This should take into consideration the combination of multiple direct-child operators:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="myCustomTable &gt; tr &gt; td"><pre class="notranslate"><code class="notranslate">myCustomTable &gt; tr &gt; td
</code></pre></div>
<p dir="auto">cc <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tbosch/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tbosch">@tbosch</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vicb/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vicb">@vicb</a></p>