Angular2複数の名前付きアウトレットを持つ遅延ロードモジュールのルーティング

Question

Angular2でルーティングの問題が発生しました。

1. 私のモジュールは、レイジーロードされている（これまでのところ、基本的な「loadChildren」アプローチには問題ありません）モジュール自体がロードされている
2. が

（DEV-ツールのネットワークタブで見られます）

問題：

以下のルーティングコードを参照してください。最初のバージョンが正しく動作しています。ルータリンクを作成すると、ルートが見つかり、エラーはスローされません。

しかし、なぜ私の最初の抜粋の仕事は、2番目のですか？私は疑似パス "テスト"を作成するだけで、この作業をする必要はありません。 2番目の例では、このエラーメッセージが表示されます。

[...]どのルートにも一致しません。 URLセグメント： 'mypathで' [...]

ワーキングルーティング：

children: export const routes: Routes = [ 
    { 
     path: '', 
     component: ParentSplitViewComponent, 
     children: [ 
      { 
       path: '', 
       redirectTo: 'test' 
      }, 
      { 
       path: 'test', 
       component: SplitViewComponent, 
       children: [ 
        { 
         path: '', 
         redirectTo: 'list' 
        }, 
        { 
         path: 'list', 
         component: MyListComponent, 
         outlet: 'left' 
        }, 
        { 
         path: ':id', 
         component: MyDetailComponent, 
         outlet: 'right' 
        } 
       ] 
      } 
     ] 
    } 
]; 

を働いていないルーティング：

children: export const routes: Routes = [ 
    { 
     path: '', 
     component: ParentSplitViewComponent, 
     children: [ 
      { 
       path: '', 
       component: SplitViewComponent, 
       children: [ 
        { 
         path: '', 
         redirectTo: 'list' 
        }, 
        { 
         path: 'list', 
         component: MyListComponent, 
         outlet: 'left' 
        }, 
        { 
         path: ':id', 
         component: MyDetailComponent, 
         outlet: 'right' 
        } 
       ] 
      } 
     ] 
    } 
]; 

の命名に依存しているドントしてくださいファイルなど私はパスなどの名前を変更する必要がありました - すべてがこの観点からうまく動作します。それはちょうどルーティングについてです。

App.routing.ts構造を理解するためにレイジーロードされたモジュールの

{ 
    path: 'mypath', 
    loadChildren: 'app/modules/myModule/my.module#MyModule' 
}, 

大きな抜粋：

import [...]  


@Component({ 
    selector: 'parent-split-view-layout-container', 
    template: ` 
    <h1>Parent</h1> 

    <router-outlet></router-outlet> 
    ` 
}); 
export class ParentSplitViewComponent {} 



@Component({ 
    selector: 'split-view-layout-container', 
    template: ` 
    <h1>Vertical Split View</h1> 

    <div id="left"> 
     <router-outlet name="left"></router-outlet> 
    </div> 

    <div id="right"> 
     <router-outlet name="right"></router-outlet> 
    </div> 
    ` 
}); 
export class SplitViewComponent {} 




/* Routing Definition */ 
export const routes: Routes = [ 
    { 
     path: '', 
     component: ParentSplitViewComponent, 
     children: [ 
      { 
       path: '', 
       redirectTo: 'test' 
      }, 
      { 
       path: 'test', 
       component: SplitViewComponent, 
       children: [ 
        { 
         path: '', 
         redirectTo: 'list' 
        }, 
        { 
         path: 'list', 
         component: MyListComponent, 
         outlet: 'left' 
        }, 
        { 
         path: ':id', 
         component: MyDetailComponent, 
         outlet: 'right' 
        } 
       ] 
      } 
     ] 
    } 
]; 

export const MyRouting: ModuleWithProviders = RouterModule.forChild(routes); 

Angular2バージョン：

"@angular/common": "~2.4.5", 
"@angular/compiler": "~2.4.5", 
"@angular/core": "~2.4.5", 
"@angular/forms": "~2.4.5", 
"@angular/http": "~2.4.5", 
"@angular/material": "^2.0.0-beta.1", 
"@angular/platform-browser": "~2.4.5", 
"@angular/platform-browser-dynamic": "~2.4.5", 
"@angular/router": "~3.4.5", 

Answer 1

それは既知のバグです。
私はそれがの重複だとしてヶ月前https://github.com/angular/angular/issues/13807
それが閉じられたことを報告した：私はあまりにも、しかし、問題は、2016年8月の26以来開かれ、「vsavkinが上の自分の割り当てを削除したとして必要https://github.com/angular/angular/issues/10981

2016年11月16日 "と書いてあります。

私は補助ルートで何ができたかと比べてかなり悪い結果に終わったが、仕事は続かなければならなかった。私はそれを助けるために貢献することができたと思うが、私はそうではない。

Answer 2

私は同じ問題に遭遇した有益な人々のおかげでここに回避策を見つけた。あなたの問題は、あなたが空のルート上の子供としてルータのアウトレットを使用しようとしている可能性があります。私は静的な値にルートを命名し、アウトレットをそこから子供にすることで、同様の問題を解決することができました。

他の人が言ったように、あなたがここでの問題を追跡することができます - https://github.com/angular/angular/issues/10981

は

{ 
    path: 'somePath', 
    component: SplitViewComponent, 
    children: [ 
    { 
     path: '', 
     redirectTo: 'list' 
    }, 
    { 
     path: 'list', 
     component: MyListComponent, 
     outlet: 'left' 
    }, 
    { 
     path: ':id', 
     component: MyDetailComponent, 
     outlet: 'right' 
    } 
    ] 
}