<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
[ ] feature request
[ ] support request"><pre class="notranslate"><code class="notranslate">[X] bug report
[ ] feature request
[ ] support request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
A secondary child named outlet inside an empty primary outlet does not match.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
A secondary child named outlet inside an empty primary outlet should match.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="http://plnkr.co/edit/O4XNG3FHhWM0m1XRwX0p?p=preview" rel="nofollow">http://plnkr.co/edit/O4XNG3FHhWM0m1XRwX0p?p=preview</a></p>
<p dir="auto">Just click on link "show bar in secondary outlet".<br>
Going to http://.../(foo:bar) <strong>does not init</strong> the Bar component inside the foo named router-outlet<br>
Going to http://.../(foo:bar) <strong>should</strong> init Bar component inside the foo named router-outlet</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 4.0</li>
<li><strong>Browser:</strong> [all]</li>
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]</li>
</ul>
<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
[ ] 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
[ ] 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">Aux-Routes are not found when using two levels of "default routes" (with <code class="notranslate">path:''</code>).<br>
This config works:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" RouterModule.forRoot([
      {
        path: 'tasks', component: TasksComponent, //container-component has two outlets! 
        children: [
          { path: '', component:TaskListComponent },
          { path: 'overview/:id', component: TasksComponent, outlet: 'right' },
        ]
      }
  ],"><pre class="notranslate"> <span class="pl-smi">RouterModule</span><span class="pl-kos">.</span><span class="pl-c1">forRoot</span><span class="pl-kos">(</span><span class="pl-kos">[</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">path</span>: <span class="pl-s">'tasks'</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-smi">TasksComponent</span><span class="pl-kos">,</span> <span class="pl-c">//container-component has two outlets! </span>
        <span class="pl-c1">children</span>: <span class="pl-kos">[</span>
          <span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s">''</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>:<span class="pl-smi">TaskListComponent</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
          <span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s">'overview/:id'</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-smi">TasksComponent</span><span class="pl-kos">,</span> <span class="pl-c1">outlet</span>: <span class="pl-s">'right'</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-kos">]</span>
      <span class="pl-kos">}</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span></pre></div>
<p dir="auto">I can open the Tasks-overview by doing:</p>
<p dir="auto"><code class="notranslate">http://localhost:4200/tasks/(right:overview/3)</code></p>
<p dir="auto">See this plnkr and click "to list", "open aux"</p>
<p dir="auto">As I want to extract the whole Tasks-Functionality into a <code class="notranslate">TasksModule</code> I need to be able to do something like this:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" RouterModule.forRoot([
      {
        path: 'tasks', : children: [ // this one would be in main module
          //this is defined in the TasksModule:
          { path: '', component: TasksComponent, //container-component has two outlets! 
            children: [
              { path: '', component:TaskListComponent },
              { path: 'overview/:id', component: TasksComponent, outlet: 'right' },
          ]
      }
  ],"><pre class="notranslate"> <span class="pl-smi">RouterModule</span><span class="pl-kos">.</span><span class="pl-c1">forRoot</span><span class="pl-kos">(</span><span class="pl-kos">[</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">path</span>: <span class="pl-s">'tasks'</span><span class="pl-kos">,</span> : <span class="pl-c1">children</span>: <span class="pl-kos">[</span> <span class="pl-c">// this one would be in main module</span>
          <span class="pl-c">//this is defined in the TasksModule:</span>
          <span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s">''</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-smi">TasksComponent</span><span class="pl-kos">,</span> <span class="pl-c">//container-component has two outlets! </span>
            <span class="pl-c1">children</span>: <span class="pl-kos">[</span>
              <span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s">''</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>:<span class="pl-smi">TaskListComponent</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
              <span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s">'overview/:id'</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-smi">TasksComponent</span><span class="pl-kos">,</span> <span class="pl-c1">outlet</span>: <span class="pl-s">'right'</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
          <span class="pl-kos">]</span>
      <span class="pl-kos">}</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span></pre></div>
<p dir="auto">I would assume both configs are equivalent, and all of the "normal" routing works perfectly fine. But now the link above <code class="notranslate">http://localhost:4200/tasks/(right:overview/3)</code> leads to:</p>
<p dir="auto"><code class="notranslate">Uncaught (in promise): Error: Cannot match any routes: 'tasks'</code></p>
<p dir="auto">See this plnkr: <a href="http://plnkr.co/edit/xd77Mkpqfq6U9tKM4USU?p=preview" rel="nofollow">http://plnkr.co/edit/xd77Mkpqfq6U9tKM4USU?p=preview</a></p>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<p dir="auto">Aux-Routes should also work with empty-path parents</p>
<p dir="auto"><strong>Reproduction of the problem</strong></p>
<p dir="auto">Working version: <a href="http://plnkr.co/edit/Twx4hXQ0TLfHfrYSe4MO?p=preview" rel="nofollow">http://plnkr.co/edit/Twx4hXQ0TLfHfrYSe4MO?p=preview</a><br>
Non-working version:  <a href="http://plnkr.co/edit/xd77Mkpqfq6U9tKM4USU?p=preview" rel="nofollow">http://plnkr.co/edit/xd77Mkpqfq6U9tKM4USU?p=preview</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Both versions of route definition should lead to the same behavior</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">With the current implementation it is impossible to create an encapsulated Config / Module for the tasks behaviour and include it under a certain path into the main config e.g. "myTasks".</p>
<p dir="auto">/cc <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vsavkin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vsavkin">@vsavkin</a></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</li>
<li><strong>Browser:</strong> [all ]</li>
<li><strong>Language:</strong> [TS ]</li>
</ul>