title: Angular named router outlet link not working
body: <p>I'm facing some problems to make a link to a named router outlet work on Angular.</p>
  <p>Here goes the most important part of the code:</p>
  <p><strong>app-routing-module.ts:</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import {FirstComponent} from './first/first.component';
  import {SecondComponent} from './second/second.component';
  import {PageNotFoundComponent} from './page-not-found/page-not-found.component';
  import {DefaultSideBarComponent} from './default-side-bar/default-side-bar.component';
  import {AlternativeSideBarComponent} from './alternative-side-bar/alternative-side-bar.component';
  
  const routes: Routes = [
    { path: 'first', component: FirstComponent},
    { path: 'second', component: SecondComponent},
    { path: '', redirectTo: '/first', pathMatch: 'full'},
    { path: '**', component: PageNotFoundComponent},
    { path: 'alternative-side-bar', component: AlternativeSideBarComponent, outlet: 'sidebar'},
    { path: '', component: DefaultSideBarComponent, outlet: 'sidebar'}
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  <p><strong>app.component.html:</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;container&quot;&gt;
    &lt;nav&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a routerLink=&quot;first&quot; routerLinkActive=&quot;active&quot;&gt;first&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a routerLink=&quot;second&quot; routerLinkActive=&quot;active&quot;&gt;second&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;div class=&quot;side-bar&quot;&gt;
      &lt;router-outlet name=&quot;sidebar&quot;&gt;&lt;/router-outlet&gt;
    &lt;/div&gt;
    &lt;main&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;/main&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And here a print-screen just to make things more clear:</p>
  <p><img src="https://i.stack.imgur.com/HYH1v.png" alt="enter image description here" /></p>
  <p>The problems I'm facing are on the links inside the sidbears components.</p>
  <p><strong>default-side-bar.component.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;a [routerLink]=&quot;[{outlets:{sidebar: ['alternative-side-bar']}}]&quot; &gt;Change Bar&lt;/a&gt;
  &lt;p&gt;default-side-bar works!&lt;/p&gt;
  </code></pre>
  <p>This link is working ok.</p>
  <p><strong>alternative-side-bar.component.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;a [routerLink]=&quot;['',{outlets:{sidebar: ['']}}]&quot; &gt;Change Bar&lt;/a&gt;
  &lt;p&gt;alternative-side-bar works!&lt;/p&gt;
  </code></pre>
  <p>Now this is the link were I'm having problems. It is resolving to this:</p>
  <pre><code>http://localhost:4200/first(sidebar:)
  </code></pre>
  <p>And obviously, it doesn't work. It generates the following error:</p>
  <pre><code>ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ''
  Error: Cannot match any routes. URL Segment: ''
  </code></pre>
  <p>Is it possible to use a default root path '' to a named outlet and have some working link pointing to it?</p>
  <p><a href="https://stackblitz.com/edit/angular-router-named-outlet?file=src/app/app.component.html" rel="nofollow noreferrer">StackBlitz if you want to try it out</a></p>
  <p><strong>Note:</strong></p>
  <p>If I use this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;a [routerLink]=&quot;[{outlets:{sidebar: ['']}}]&quot; &gt;Change Bar&lt;/a&gt;
  </code></pre>
  <p>The result is even worst with a nested awkward outlet link:</p>
  <pre><code>http://localhost:4200/first(sidebar:alternative-side-bar/(sidebar:))
  </code></pre>