web-dev-qa-db-fra.com

Comment déboguer non pris (promis): EmptyError: aucun élément en séquence provoqué par router.navigate?

J'essaie d'implémenter une route angulaire simple

const appRoutes: Routes = [
   { path: ''        ,redirectTo: '/recipes', pathMatch: 'full'},
   { path: 'recipes'              , component: RecipesComponent},
   { path: 'recipes/:recipeName'  , component: RecipesComponent},
];

dans certains composants qui génèrent la liste, j’ai une fonction qui, en cliquant sur un met à jour la variable d’état et les routes, bien que je dispose également d’un abonné au mécanisme de récupération lors de l’initialisation. 

  ngOnInit() {
    this.route.params
      .subscribe(
        (params: {Params}) => {

          this.selectedRecipe = this.findRecipeByName(params['recipeName']);  
        });
  }


   navRecipe(recipeName: string): void {
      let path = '/recipes/' + recipeName;
      this.selectedRecipe = this.findRecipeByName(recipeName);
      this.router.navigate([path]);
   }

Mais lorsque j'essaie de cliquer sur un lien qui redirige vers le composant avec le paramètre, j'obtiens ce qui suit:

core.js:1350 ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence
EmptyError: no elements in sequence
    at new EmptyError (EmptyError.js:28)
    at FirstSubscriber._complete (first.js:154)
    at FirstSubscriber.Subscriber.complete (Subscriber.js:122)
    at MergeMapSubscriber._complete (mergeMap.js:150)
    at MergeMapSubscriber.Subscriber.complete (Subscriber.js:122)
    at MapSubscriber.Subscriber._complete (Subscriber.js:140)
    at MapSubscriber.Subscriber.complete (Subscriber.js:122)
    at EmptyObservable._subscribe (EmptyObservable.js:83)
    at EmptyObservable.Observable._trySubscribe (Observable.js:172)
    at EmptyObservable.Observable.subscribe (Observable.js:160)
    at new EmptyError (EmptyError.js:28)
    at FirstSubscriber._complete (first.js:154)
    at FirstSubscriber.Subscriber.complete (Subscriber.js:122)
    at MergeMapSubscriber._complete (mergeMap.js:150)
    at MergeMapSubscriber.Subscriber.complete (Subscriber.js:122)
    at MapSubscriber.Subscriber._complete (Subscriber.js:140)
    at MapSubscriber.Subscriber.complete (Subscriber.js:122)
    at EmptyObservable._subscribe (EmptyObservable.js:83)
    at EmptyObservable.Observable._trySubscribe (Observable.js:172)
    at EmptyObservable.Observable.subscribe (Observable.js:160)
    at resolvePromise (zone.js:824)
    at resolvePromise (zone.js:795)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.js:4621)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at ZoneTask.invokeTask [as invoke] (zone.js:503)
    at invokeTask (zone.js:1540)
angularangular-router
17
Iancovici

J'ai rencontré la même erreur avec Angular v 4.4.6. J'ai trouvé deux solutions alternatives pour résoudre l'erreur. L'un ajoutait pathMatch: 'full' à chaque définition de route. L'autre était en train de déclasser rxjs en dessous de la version 5.5.3. Si l'un ne fonctionne pas pour vous, l'autre le fera peut-être.

update: il semble que le problème a été corrigé dans Rxjs v5.5.5. Dans un projet utilisant Angular 5.0.5, l'erreur s'est produite après la mise à niveau de rxjs vers la version 5.5.5.

24
EvanMorrison

Angular dernière version bug. Ajoutez pathMatch: 'full' à tous les itinéraires. 

 {
    path: '',
    component: HomeComponent,
    pathMatch: 'full'
  },
  {
   path: 'about',
   component: AboutComponent,
   pathMatch: 'full'
  },
15
Ericky

J'ai rencontré la même erreur avec Angular 5.0.1 et rxjs 5.5.3. Nous n'avons pas rencontré l'exception lorsque nous avons modifié l'ordre dans le tableau routes. Donc, pour votre exemple:

const appRoutes: Routes = [
    { path: '',                    redirectTo: '/recipes', pathMatch: 'full'},
    { path: 'recipes/:recipeName', component: RecipesComponent},
    { path: 'recipes',             component: RecipesComponent},
];

Placer le chemin plus détaillé (recipes/:recipeName) avant le chemin général (recipes).

1
Daxez