Angular Ошибка сброса 2: выход не активирован

Я установил свое приложение, чтобы иметь Recipe Book, который имеет список Recipies, который, когда я нажимаю на Recipe, затем показывает 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' }
];

Ответ 1

Этот маршрут недействителен, и вы должны получить для него ошибку.

{ path: '' },

Маршрут должен либо иметь component, a redirectTo, либо children.

Если пустой путь пути не имеет детей, он также должен иметь pathMatch: 'full'.

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

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

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

Ответ 2

TL;DR; ответ:

{
      path: ':question',
      runGuardsAndResolvers: () => false   // blocks component creation
}

В Angular router есть новая функция, которая, похоже, связана с этой проблемой, но, насколько я могу судить, не является ее прямым решением. Новая опция - runGuardsAndResolvers = 'pathParamsChange' и она влияет на то, когда Angular проверяет охрану и распознаватели - и, что особенно важно, запускает ли эта проверка на выходе.

Итак, прежде чем я нашел новую опцию:

Я вошел в угловой код - и здесь происходит настоящая ошибка (выделена красным цветом) на context.outlet.component (где component - это геттер, который выдает).

Так что, чтобы исправить это, мне просто нужно сделать так, чтобы shouldRun == false.
И shouldRun - это просто shouldRunGuardsAndResolvers(...) поэтому, если это можно сделать, чтобы вернуть false, он не будет пытаться создать компонент в "неправильном" месте.

Так что решение довольно простое:

 {
        path: 'contactus',
        component: ContactUsComponent,

        children: [
            {
                path: 'topics',
                pathMatch: 'full'
            },

            {
                path: 'faq',
                component: FaqPanelComponent
            },

            { 
                path: 'test',
                component: ContactusTopicListComponent
            },
            {
                path: ':category',

                children: 
                [
                    {
                        path: ':question',
                        runGuardsAndResolvers: () => false   // blocks component creation
                    }
                ]
            }
        ]
    },

В настоящее время runGuardsAndResolvers имеет довольно много опций, но тот, который я использую, всегда возвращает false что эквивалентно never которое действительно должно быть превращено в опцию. Но вот как я узнал о новых возможностях маршрутизатора :-)

Также, если у вас есть два уровня, вы должны поместить это на оба (или, возможно, просто на самый высокий) уровень:

        {
            path: ':category',
            runGuardsAndResolvers: () => false,

            children: 
            [
                {
                    path: ':question',
                    runGuardsAndResolvers: () => false
                }
            ]
        }

Дополнительная информация о резольверах: https://blog.angularindepth.com/new-in-angular-v7-1-updates-to-the-router-fd67d526ad05

Ответ 3

Это может помочь кому-то еще.

Я получаю эту ошибку. Я проверил все мои определенные routes в моем файле маршрута, path и components определены правильно.

Причиной получения этой ошибки было то, что я забыл добавить ссылку на свой service в app.module.ts который использовался в одном из моих компонентов для получения данных от RestApi.

Поэтому всегда добавляйте ссылку на сервис в app.module.ts в разделе providers сразу после создания сервиса.

imports: [
   BrowserModule,
   HttpModule,
   ......
 ],

providers: [
    AuthService, 
    ........ // Here, service reference
]