web-dev-qa-db-fra.com

Angular 2 erreur de projection: la sortie n'est pas contrôlée

J'ai configuré mon application de manière à avoir un Recipe Book qui contient une liste de Recipies qui, lorsque je clique sur une recette, affiche le Recipe Details dans un itinéraire imbriqué. Celui-ci contient également un bouton qui, lorsque vous cliquez dessus, charge les ingrédients dans une route imbriquée à l'intérieur du Recipes Details. 

Jusqu'ici, le routage semble fonctionner, sauf lorsque j'essaie de naviguer vers une autre Recipe. Si le bac Ingredients (route) est actif, il modifiera la recette et réduira la route Ingredients. Si j'essaye de naviguer (sans ouvrir les ingrédients), l'erreur suivante apparaît:

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

Il semble que le routeur ait besoin de Ingredients pour être actif, sinon il ne comprend pas la route imbriquée. C’est mon point de vue, mais je ne sais pas comment le réparer ou quand je me suis trompé.

single-recipe-book-page.component.html 

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

recipe-detail.component.html 

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

ingredients-list.component.html 

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

app.routes.ts (mis à jour)

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' }
];
angularangular2-router3
10
Daimz

Cet itinéraire n'est pas valide et vous devriez obtenir une erreur.

{ path: '' },

Une route doit avoir une component, une redirectTo ou une children.

Si un itinéraire de chemin vide n'a pas d'enfants, il devrait également avoir pathMatch: 'full'.

Je suppose que ce que tu veux c'est

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

Où DummyComponent est un composant avec une vue vide . Vous pouvez réutiliser le même DummyComponent pour tous ces chemins.

13
Günter Zöchbauer

TLDR; réponse :

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

Un routeur new feature dans Angular a un lien avec ce problème, mais ne constitue pas - à ce que je sache - une solution directe. La nouvelle option est runGuardsAndResolvers = 'pathParamsChange' et affecte le moment où Angular vérifie les gardes et les résolveurs - et détermine de manière décisive si cette vérification de sortie est effectuée.

Alors avant que je trouve la nouvelle option:

  • Je passais dans le code angulaire - et l'erreur réelle se produit ici (surlignée en rouge) à context.outlet.component (où component est un getter qui est lancé).

enter image description here

  • Donc, pour réparer, il me suffirait de créer shouldRun == false. 

  • Et shouldRun est tout simplement shouldRunGuardsAndResolvers(...) donc si cela peut être fait pour retourner false, alors il ne tentera pas de créer un composant au «mauvais» emplacement.

Donc la solution est assez simple:

 {
        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
                    }
                ]
            }
        ]
    },

Actuellement, runGuardsAndResolvers a assez peu d'options , mais celui que j'utilise renvoie toujours false, ce qui équivaut à never, ce qui devrait en réalité être transformé en une option. Mais c'est comme ça que j'ai découvert les nouvelles fonctionnalités du routeur :-)

De plus, si vous avez deux niveaux, vous devez le placer au niveau le plus élevé:

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

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

Pour en savoir plus sur les résolveurs: https://blog.angularindepth.com/new-in-angular-v7-1-updates-to-the-router-fd67d526ad05

1
Simon_Weaver

Cela pourrait aider quelqu'un d'autre.

Je recevais cette erreur. J'ai vérifié tous les routes définis dans mon fichier de routage. Les path et components sont définis correctement.

La raison de cette erreur est que j'ai oublié d'ajouter la référence de ma service dans app.module.ts qui était utilisée dans l'un de mes composants pour obtenir des données de RestApi.

Donc, ajoutez toujours la référence de service dans app.module.ts dans la section providers, immédiatement après la création du service.

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

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