2017-12-03 52 views
16

我想實現生成列表中的一些成分簡單的角度路線如何調試未被捕獲(在promise中):EmptyError:由router.navigate引起的序列中沒有元素?

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

但是,當我嘗試單擊重新路由到組件與參數,我得到以下的鏈接:

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) 

回答

24

我遇到了與Angular v 4.4.6相同的錯誤。我發現有兩種解決方案可以解決這個錯誤。一個是將pathMatch: 'full'添加到每個路由定義。另一個是將rxjs降低到v5.5.3以下。如果一個人不適合你,也許另一個人會。

更新:它出現的問題已被固定在rxjs v5.5.5。在使用Angular 5.0.5的項目中,將rxjs升級到v5.5.5後,錯誤停止發生。

+0

這適用於我。謝謝埃文,謝謝你發佈! – bevada

+3

Thanks..changed「rxjs」:「^ 5.1.0」到「rxjs」:「5.5.2」現在工作 – prash

+0

添加pathMatch:'full'也適用於我! –

15

角最新版本的bug。將pathMatch: 'full'添加到所有路線。

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

你可以添加一個版本號和來源? – Mick

+0

我只有一條路由失敗 - 所以我試着只加入pathMatch:'full'到那條路由 - 不起作用。真的需要將其添加到每條路線。 –

1

我遇到了與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)之前把更詳細的路徑(recipes/:recipeName)。

相關問題