角度2投げエラー：アウトレットがアクティブ化されていません

Question

私はRecipe Bookを持っているので、Recipiesのリストを持っています。レシピをクリックすると、ネストされたルートにRecipe Detailsが表示されます。これには、ボタンをクリックすると、Recipes Details内のネストされたルートの成分が読み込まれます。

これまでのところ、別のRecipeに移動しようとしたときを除いて、ルーティングが機能しているようです。 Ingredientsトレイ（ルート）がアクティブである場合、それはレシピが変更されますし、私は、（成分を開かずに）しようとすると移動すると、Ingredientsルートを折りたたむ私は次のエラーを取得する：

Uncaught (in promise): Error: Outlet is not activated 
Error: Outlet is not activated 

それは私のように見えますルータはIngredientsをアクティブにする必要があります。そうしないと、ネストされたルートを理解できません。それは私がそれを取るが、それを修正する方法や私が間違っていたときにはわからない。

シングルレシピブックpage.component.html

<app-tray class="recipe-list"> 
    <app-recipe-list [recipe]="recipe"></app-recipe-list> 
</app-tray> 
<router-outlet></router-outlet> 

レシピdetail.component.html

<app-tray class="recipe"> 
    The routing has worked and loaded recipe. 
</app-tray> 
<router-outlet></router-outlet> 

成分-list.component.html

<app-tray class="ingredients-list"> 
    Recipe Ingredients have loaded. 
</app-tray> 

app.routes.ts（更新）

export const routerConfig : Route[] = [ 
    { 
    path: 'recipe-books', 
    children: [ 
     { 
     path: ':id', component: SingleRecipeBookPageComponent, 
     children: [ 
      { 
      path: 'recipes', 
      children: [ 
       { path: ':id', component: RecipeDetailComponent, 
       children: [ 
        { path: '', component: IngredientsListComponent }, 
        { path: 'ingredients', component: IngredientsListComponent } 
       ] 
       }, 
       { path: 'new', component: IngredientsListComponent }, 
       { path: '', component: RecipeDetailComponent } 
      ] 
      }, 
      { path: '', redirectTo: 'recipes', pathMatch: 'full' } 
     ] 
     }, 
     { path: '', component: RecipeBooksPageComponent } 
    ] 
    }, 
    { path: 'ingredients', component: IngredientsComponent }, 
    { path: '', redirectTo: 'recipe-books', pathMatch: 'full' }, 
    { path: '**', redirectTo: 'recipe-books', pathMatch: 'full' } 
]; 

Answer 1

このルートは無効であり、あなたはそれのためのエラーを取得する必要があります。

{ path: '' }, 

経路のいずれかcomponent、redirectTo、又はchildrenを有する必要があります。

空のパスルートに子がない場合は、pathMatch: 'full'も必要です。私はあなたが何をしたいと思い

はDummyComponentは、空のビューを持つコンポーネントである

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

です。 これらすべてのパスに同じDummyComponentを再利用できます。