How to debug uncaught (in promise): EmptyError: no elements in sequence caused by router.navigate?

Question

我正在尝试实施一个简单的 angular 路线

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

在一些生成列表的组件中，我有一个函数，点击更新状态变量和路由，尽管我也有在初始化时发生的获取机制订阅者。

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

但是当我尝试点击 link 重新路由到带有参数的组件时，我得到以下信息：

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 最新版本错误。将 pathMatch: 'full' 添加到所有路由。

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

Answer 2

我在 Angular v 4.4.6 中遇到了同样的错误。我发现有两种替代解决方案可以解决该错误。一个是将 pathMatch: 'full' 添加到每个路由定义中。另一个是将 rxjs 降级到 v5.5.3 以下。如果一个不适合你，也许另一个会。

更新： 看来问题已在 rxjs v5.5.5 中修复。在使用 Angular 5.0.5 的项目中，将 rxjs 升级到 v5.5.5 后错误停止发生。

Answer 3

我在 Angular 5.0.1 和 rxjs 5.5.3 中遇到了同样的错误。当我们更改 routes 数组中的顺序时，我们没有遇到异常。所以对于你的例子：

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

将更详细的路径 (recipes/:recipeName) 放在一般路径 (recipes) 之前。

How to debug uncaught (in promise): EmptyError: no elements in sequence caused by router.navigate?

How to debug uncaught (in promise): EmptyError: no elements in sequence caused by router.navigate?

angular

angular-router