エラー：いずれのルートにも一致しません。 URLセグメント：

Question

私はこのチュートリアルhttp://onehungrymind.com/named-router-outlets-in-angular-2/に従うことを試みていますが、エラーが発生しています。ここで

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'clients' Error: Cannot match any routes. URL Segment: 'clients'

が間違っている可能性がどのような私のRouter module

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 { 
} 

App.component

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; 
    } 


} 

Client.component

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<Client> = []; 

    constructor(private clientService: ClientService, 
       private router: Router) { 
    } 
    ngOnInit() { 
     this.getClients().subscribe((clients) => { 
      this.clients = clients; 
     }); 
    } 

    getClients() { 
     return this.clientService.getClients(); 
    } 
} 

のですか？私は任意のヘルプ

UPDATEのための感謝されるアドバイスに

おかげで、私はその

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'} 
    ] 
    }, 
]; 

のようなものを試してみました。しかし、それはまだ動作しません。

は、たぶん私はこの間違っているのでしょうが、私は

<div id="sidebar" class="col-sm-3 client-sidebar"> 
    <h2 class="sidebar__header"> 
     Client list 
    </h2> 
    <div class="sidebar__list"> 
     <router-outlet name="client-list"></router-outlet> 
    </div> 
</div> 
<div id="client-info" class="col-sm-4 client-info"> 
    <div class="client-info__section client-info__section--general"> 
     <router-outlet name="client-details"></router-outlet> 
    </div> 
</div> 

ClientComponentは、だから私は私のクライアントコンポーネントがすべてのクライアント関連のコンポーネントを維持したい、私のために次のテンプレートを持っています。ユーザーがボタンをクリックすると、クライアントリストがロードされます。

Answer 1

空のパス''なし子ルートをルートにpathMatch: 'full'

{path: '', component: AppComponent, pathMatch: 'full'}, 

を追加します。

Answer 2

既存のMVCアプリケーションにAngular 2/4を統合していますが、この問題もありました。

例を使用して、path: 'clients'の代わりにpath: 'Clients'というルーティング設定を使用し、http://localhost/clientsなどのURLにアクセスしようとすると、このエラーが発生します。

ルートパス名では大文字と小文字が区別されます（現在のところ）。そうでない場合は、URLにあるものと一致しません。また、典型的なMVCコントローラ/アクションの名前付けでは、「InitialCaps-style」です。