generate - router.navigate angular 5

Cómo depurar sin captura(en promesa): EmptyError: no hay elementos en secuencia causados por router.navigate?

Question

Estoy tratando de implementar una ruta angular simple

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

en algún componente que genera la lista, tengo una función que al hacer clic en una variable de estado de actualizaciones y rutas, aunque también tengo un mecanismo de recuperación de suscriptores ocurriendo en la inicialización.

  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]);
   }

Pero cuando intento hacer clic en un enlace que se redirige al componente con el parámetro, obtengo lo siguiente:

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)

Answer 1

Angular última versión bug. Agregue pathMatch: ''full'' a todas las rutas.

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

Answer 2

Encontré el mismo error con Angular 5.0.1 y rxjs 5.5.3. No encontramos la excepción cuando cambiamos el orden en la matriz de rutas. Así que para su ejemplo:

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

Colocando la ruta más detallada ( recipes/:recipeName ) antes de la ruta general ( recipes ).

Answer 3

Encontré el mismo error con Angular v 4.4.6. Hubo dos soluciones alternativas que encontré para resolver el error. Uno fue agregar pathMatch: ''full'' a cada definición de ruta. El otro fue degradando rxjs por debajo de v5.5.3. Si uno no trabaja para ti, tal vez el otro lo haga.

actualización: parece que el problema se ha solucionado en rxjs v5.5.5. En un proyecto que usa Angular 5.0.5, después de actualizar rxjs a v5.5.5, el error dejó de suceder.