title: Navigating to nested/multiple auxiliary routes in angular 4
body: <p>I am trying to navigate to a nested auxiliary route, and I keep getting the error:</p>
  
  <pre><code>ERROR Error: Uncaught (in promise):
  Error: Cannot match any routes. URL Segment: 'sign-in'
  </code></pre>
  
  <p>The URL I am trying to navigate to:</p>
  
  <pre><code>http://localhost:4200/(modalcontainer:modals//modalview:sign-in)
  </code></pre>
  
  <p>My router config for the route looks like this:</p>
  
  <pre><code>{
    path: 'modals',
    component: ModalsComponent,
    outlet: 'modalcontainer',
    children: [
        {
            path: 'register',
            outlet: 'modalview',
            component: ModalRegisterComponent
        },
        {
            path: 'sign-in',
            outlet: 'modalview',
            component: ModalSigninComponent
        }
    ]
  }
  </code></pre>
  
  <p>So there are 2 <code>router-outlets</code> which are <code>modalcontainer</code> and <code>modalview</code>. The latter is inside the template of <code>ModalsComponent</code>.</p>
  
  <h3>AppComponent</h3>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;router-outlet name="modalcontainer"&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <h3>ModalsComponent</h3>
  
  <pre><code>&lt;div class="overlay" (click)="close($event)"&gt;
    &lt;router-outlet name="modalview"&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>modalcontainer</code> populates ok, but as soon as I try to populate the <code>modalview</code> outlet, it errors.</p>
  
  <p>Ways of navigating I have tried are:</p>
  
  <ul>
  <li><code>[routerLink]="[{outlets: {'modalcontainer': ['modals'], 'modalview': ['register']}}]"</code></li>
  <li><code>[routerLink]="[{outlets: {'modalcontainer': ['modals'], 'modalview': ['modals', 'register']}}]"</code></li>
  <li><code>[routerLink]="['modals', {outlets: {'modalview': ['register']}}]"</code></li>
  <li>Directly typing into the address bar <code>http://localhost:4200/(modals:modals//modal:sign-in)</code></li>
  <li><code>this.router.navigate([{outlets: {'modalcontainer': ['modals'], 'modalview': ['register']}}]);</code></li>
  <li><code>this.router.navigateByUrl('/(modals:modals//modal:sign-in)');</code></li>
  </ul>
  
  <p>Is it something in my configuration or the way I am accessing the URLs? Or is this a bug?</p>