Ошибка угла отклонения: выход не активирован

Question

Я установил свое приложение, так что у меня есть Recipe Book, который имеет список Recipies, который, когда я нажимаю на Рецепт, затем показывает Recipe Details по вложенному маршруту. Это также имеет кнопку, которая при нажатии загружает ингредиенты по вложенному маршруту внутри Recipes Details.

Пока что работа маршрутизации, за исключением случаев, когда я пытаюсь перейти к другому Recipe. Если Ingredients лоток (маршрут) активен, то он изменит рецепт и свернуть 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'.

Я предполагаю, что вы хотите

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

Где DummyComponent является компонентом с пустым видом. Вы можете использовать тот же самый DummyComponent для всех этих путей.