title: Angular 6 Routing using Multiple Outlets
body: <p>I have the following scenario. I have two components, <code>InvLoginComponent</code> and <code>InvDashboardComponent</code> that are mounted on the "primary" (or nameless) router in my application. The user logs in and is routed to the dashboard component. Inside the dashboard, I have a sidenav with links. When the links are clicked, I want to load the related component(s) inside a named router outlet inside <code>InvDashSidenavComponent</code> which, is nested in <code>InvDashboardComponent</code>. So far, the code looks like this:</p>
  
  <p><code>app.module.ts</code></p>
  
  <pre><code>// Routes
  const routes: Routes = [
    {path: "", redirectTo: "login", pathMatch: "full"},
    {path: "login", component: InvestigatorLoginComponent },
    {path: "dashboard", component: InvDashboardComponent },
    {path: "pending", component: PendingCasesComponent, outlet:'casesOutlet' },
    {path: "completed", component: CompletedCasesComponent, outlet: 'casesOutlet'}, 
    {path: "flagged", component: FlaggedCasesComponent, outlet: 'casesOutlet' }
  ];
  // ... in imports
  RouterModule.forRoot(
    routes, { enableTracing: false} // &lt;= debugging
  ),
  // ... rest of app.module.ts
  </code></pre>
  
  <p><code>app.component.ts</code></p>
  
  <pre><code>&lt;router-outlet
  (activate)="activateHandler($event)"
  (deactivate)="deactivateHandler($event)"
  &gt;&lt;/router-outlet&gt; &lt;!-- Nameless or primary outlet --&gt;
  </code></pre>
  
  <p><code>inv-dash-sidenav.component.ts</code></p>
  
  <pre><code>caseRoutes = [
  { name: 'Pending', href: 'pending' },
  { name: 'Completed', href: 'completed' },
  { name: 'Review', href: 'review' },
  { name: 'Flagged', href: 'flagged' }
  ]; // used in the template for binding to routerLink
  </code></pre>
  
  <p><code>inv-dash-sidenav.component.html</code></p>
  
  <pre><code>&lt;mat-nav-list *ngIf="showCases"&gt;
      &lt;a mat-list-item *ngFor="let c of caseRoutes"&gt;
        &lt;a [routerLink]="[{ outlets: {casesOutlet:[c.href] } }]" routerLinkActive="active"&gt;{{ c.name }}&lt;/a&gt;
      &lt;/a&gt;
  &lt;/mat-nav-list&gt;
  &lt;!-- Later in the template --&gt;
  &lt;router-outlet name="casesOutlet"&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>When I run the app, the following happens:
  1. The dashboard and all other non-sidenav components are loaded as before.
  2. Upon triggering the sidenav from a toggle button, the sidenav slides in as usual.
  3. When the link are clicked, I receive the following error message: <code>Error: Cannot match any routes. URL Segment: 'dashboard'</code>.</p>
  
  <p>What's causing this error and what are the ways to fix this? </p>