<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="[ x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] 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">[ x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] 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">I do have a lazy loaded module which loads by default <code class="notranslate">LazyLoadedComponent</code> when I go to <code class="notranslate">/lazy</code>. So far, it's OK.</p>
<p dir="auto">This component contains 2 router-outlet :</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;router-outlet&gt;&lt;/router-outlet&gt;
&lt;router-outlet name=&quot;aux&quot;&gt;&lt;/router-outlet&gt;"><pre class="notranslate"><code class="notranslate">&lt;router-outlet&gt;&lt;/router-outlet&gt;
&lt;router-outlet name="aux"&gt;&lt;/router-outlet&gt;
</code></pre></div>
<p dir="auto">And the <code class="notranslate">LazyLoadedModule</code> has the following routes :</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const routes = [
  {
      path: '',
      component: LazyLoadedComponent,
      children: [
          {
              path: '',
              component: NonAuxComponent
          },
          {
              path: '',
              component: AuxComponent,
              outlet: 'aux'
          }
      ]
  }
];"><pre class="notranslate"><code class="notranslate">const routes = [
  {
      path: '',
      component: LazyLoadedComponent,
      children: [
          {
              path: '',
              component: NonAuxComponent
          },
          {
              path: '',
              component: AuxComponent,
              outlet: 'aux'
          }
      ]
  }
];
</code></pre></div>
<p dir="auto">When I go to <code class="notranslate">/lazy</code> I do have the 3 components loaded as expected.<br>
But, if I want to change the path to display the <code class="notranslate">AuxComponent</code> like that :</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
   path: 'auxpath',
   component: AuxComponent,
   outlet: 'aux'
}"><pre class="notranslate"><code class="notranslate">{
   path: 'auxpath',
   component: AuxComponent,
   outlet: 'aux'
}
</code></pre></div>
<p dir="auto">And I try to go to <code class="notranslate">/lazy(aux:auxpath)</code> it's not working.</p>
<p dir="auto">I also tried to hit that URL using the <code class="notranslate">routerLink</code> like that :</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;a [routerLink]=&quot;[{ outlets: { aux: 'auxpath' } }]&quot;&gt;Load an auxiliary route&lt;/a&gt;"><pre class="notranslate"><code class="notranslate">&lt;a [routerLink]="[{ outlets: { aux: 'auxpath' } }]"&gt;Load an auxiliary route&lt;/a&gt;
</code></pre></div>
<p dir="auto">But it's not working either.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/4950209/21710815/5451e5e0-d3eb-11e6-8e01-5e4a4023b06a.png"><img src="https://cloud.githubusercontent.com/assets/4950209/21710815/5451e5e0-d3eb-11e6-8e01-5e4a4023b06a.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Is this a bug with the router ? Is it just me missing out something here?</p>
<p dir="auto">You can check out this <a href="http://plnkr.co/edit/TiwzIoR8t57yRrx8zpaQ?p=preview" rel="nofollow">Plunkr</a> to make your own tests.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="http://plnkr.co/edit/TiwzIoR8t57yRrx8zpaQ?p=preview" rel="nofollow">Plunkr</a> :</p>
<ul dir="auto">
<li>Click on "Demo (click to lazy load the module)"</li>
<li>Once the module is loaded, click on "Load an auxiliary route"</li>
<li>The non auxiliary component is well displayed, the auxiliary component is not displayed</li>
</ul>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">Ubuntu 16.10<br>
VSC<br>
Yarn<br>
(But as this is also happening on Plunkr, not sure it's relevant).</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X</li>
</ul>

<p dir="auto">v2.4.1 (the one used on Plunkr)</p>
<ul dir="auto">
<li><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]</li>
</ul>

<p dir="auto">Chrome</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
TypeScript</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =<br>
v6.8.0</p>
</li>
</ul>
<p dir="auto">In Angular 1.0 Dart, it is possible to use a TypeLiteral to bind and inject generics:</p>
<div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class TypeLiteral&lt;T&gt; {
  const TypeLiteral();

  Type get type =&gt; t;
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-c1">TypeLiteral</span>&lt;<span class="pl-c1">T</span>&gt; {
  <span class="pl-k">const</span> <span class="pl-c1">TypeLiteral</span>();

  <span class="pl-c1">Type</span> <span class="pl-k">get</span> type <span class="pl-k">=&gt;</span> t;
}</pre></div>
<p dir="auto">An example of use:</p>
<div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component(
  module: MyComponent.module
)
class MyComponent {
  static void module(DirectiveBinder directiveBinder) {
    directiveBinder.bind(
        const TypeLiteral&lt;List&lt;String&gt;&gt;().type,
        toValue: &lt;String&gt; const ['Hello', 'World']);
  }

  MyComponent(List&lt;String&gt; stringList) {
    assert(stringList == const ['Hello', 'World']);
  }
}"><pre class="notranslate"><span class="pl-k">@Component</span>(
  module<span class="pl-k">:</span> <span class="pl-c1">MyComponent</span>.module
)
<span class="pl-k">class</span> <span class="pl-c1">MyComponent</span> {
  <span class="pl-k">static</span> <span class="pl-k">void</span> <span class="pl-en">module</span>(<span class="pl-c1">DirectiveBinder</span> directiveBinder) {
    directiveBinder.<span class="pl-en">bind</span>(
        <span class="pl-k">const</span> <span class="pl-c1">TypeLiteral</span>&lt;<span class="pl-c1">List</span>&lt;<span class="pl-c1">String</span>&gt;&gt;().type,
        toValue<span class="pl-k">:</span> <span class="pl-k">&lt;</span><span class="pl-c1">String</span><span class="pl-k">&gt;</span> <span class="pl-k">const</span> [<span class="pl-s">'Hello'</span>, <span class="pl-s">'World'</span>]);
  }

  <span class="pl-c1">MyComponent</span>(<span class="pl-c1">List</span>&lt;<span class="pl-c1">String</span>&gt; stringList) {
    <span class="pl-k">assert</span>(stringList <span class="pl-k">==</span> <span class="pl-k">const</span> [<span class="pl-s">'Hello'</span>, <span class="pl-s">'World'</span>]);
  }
}</pre></div>
<p dir="auto">In Angular 2, <a href="https://github.com/angular/angular/blob/master/modules/angular2/src/di/binding.js#L467">based on this snippet</a> Tim linked me to, it looks like that is no longer possible. Can we add this is a FR for NG 2.0/DI? If not, is there an alternative that will also play well with Angular 1.0 Dart's DI system?</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/kegluneq/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/kegluneq">@kegluneq</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/yjbanov/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/yjbanov">@yjbanov</a></p>