title: Error: Cannot match any routes. URL Segment:
body: <p>I am trying to follow this tutorial <a href="http://onehungrymind.com/named-router-outlets-in-angular-2/" rel="noreferrer">http://onehungrymind.com/named-router-outlets-in-angular-2/</a> but I am getting the error.</p>
  
  <blockquote>
    <p>EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL
    Segment: 'clients' Error: Cannot match any routes. URL Segment:
    'clients'</p>
  </blockquote>
  
  <p>Here is my <code>Router module</code></p>
  
  <pre><code>import {NgModule} from "@angular/core";
  import {Routes, RouterModule} from "@angular/router";
  import {AppComponent} from "./app.component";
  import {ClientComponent} from "./clients/client.component";
  import {ClientDetailsComponent} from "./clients/client-details/client-details.component";
  import {ClientListComponent} from "./clients/client-list/client-list.component";
  
  const routes: Routes = [
      {path: '', component: AppComponent},
      {path: 'clients', component: ClientComponent, children: [
          {path: 'list', component: ClientListComponent, outlet: 'client-list'},
          {path: ':id', component: ClientDetailsComponent, outlet: 'client-details'}
      ]
      },
  ];
  
  @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule],
      providers: []
  })
  export class RoutingModule {
  }
  </code></pre>
  
  <p>App.component</p>
  
  <pre><code>export class AppComponent {
      clientsLoaded = false;
  
      constructor(private clientService: ClientService,
                  private router: Router) {
      }
  
      loadClientsComponent() {
          this.router.navigate(['/clients', {outlets: {'client-list': ['clients'], 'client-details': ['none'], 'client-accounts-info': ['none']}}]);
          this.clientsLoaded = true;
      }
  
  
  }
  </code></pre>
  
  <p>Client.component </p>
  
  <pre><code>import {Component} from "@angular/core";
  import {ClientService} from "../services/client.service";
  import {Router} from "@angular/router";
  import {Client} from "./client-details/model/client.model";
  @Component({
      selector: 'clients',
      templateUrl: 'app/clients/client.component.html'
  })
  export class ClientComponent {
      clients: Array&lt;Client&gt; = [];
  
      constructor(private clientService: ClientService,
                  private router: Router) {
      }
      ngOnInit() {
          this.getClients().subscribe((clients) =&gt; {
              this.clients = clients;
          });
      }
  
      getClients() {
          return this.clientService.getClients();
      }
  }
  </code></pre>
  
  <p>What can be wrong ? I would be grateful for any help</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Thanks for the advice, I have tried something like that </p>
  
  <pre><code>const routes: Routes = [
      {path: '', component: AppComponent, pathMatch: 'full'},
      {path: 'clients', component: ClientComponent, children: [
          {path: '', component: ClientComponent},
          {path: 'list', component: ClientListComponent, outlet: 'client-list'},
          {path: ':id', component: ClientDetailsComponent, outlet: 'client-details'}
      ]
      },
  ];
  </code></pre>
  
  <p>But it still doesn't work.</p>
  
  <p>Maybe I am doing this wrong but I have the following template for my <code>ClientComponent</code></p>
  
  <pre><code>&lt;div id="sidebar" class="col-sm-3 client-sidebar"&gt;
      &lt;h2 class="sidebar__header"&gt;
          Client list
      &lt;/h2&gt;
      &lt;div class="sidebar__list"&gt;
          &lt;router-outlet name="client-list"&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="client-info" class="col-sm-4 client-info"&gt;
      &lt;div class="client-info__section client-info__section--general"&gt;
          &lt;router-outlet name="client-details"&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So I want my client component to keep all client related components. And if user clicks for example a button then a client list is loaded.</p>