angular - Angular 2スローエラー:アウトレットがアクティブ化されていません

Question

レシピをクリックすると、ネストされたルートに表示さRecipe Bookれるリストを持つようにアプリを設定しました。これには、クリックすると 内のネストされたルートに材料をロードするボタンもあります。RecipiesRecipe DetailsRecipes Details

これまでのところ、ルーティングは機能しているようですが、別のRecipe. Ingredientsトレイ（ルート）がアクティブな場合、レシピが変更され、Ingredientsルートが折りたたまれます。次に、（材料を開かずに）ナビゲートしようとすると、次のエラーが表示されます。

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

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

シングルレシピ本のページ.component.html

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

レシピ詳細.component.html

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

成分リスト.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' }
];