2017-12-03 172 views
16

Ben listesini oluşturur bazı bileşende basit açısal rotayıNasıl (sözden) yakalanmamış hata ayıklama?

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

uygulamaya çalışıyorum, ben ben de mekanizma aboneyi getirilirken olsa, bir güncellemeleri tıklama değişken ve güzergahları devlet bir işlevi var Başlatmada oluyor.

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

Ama şu olsun parametresi ile bileşene reroutes bir linke tıklayın çalıştığınızda:

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) 

cevap

24

Aynı hatayla Angular v 4.4.6 ile karşılaştım. Hatayı çözmek için bulduğum iki alternatif çözüm vardı. Biri her rota tanımına pathMatch: 'full' ekliyordu. Diğeri, v5.5.3'ün altındaki rxjs'yi düşürüyordu. Biri sizin için işe yaramazsa belki de diğer irade.

güncelleme: sorunu rxjs v5.5.5'te giderilmiştir. Açısal 5.0.5 kullanan bir projede, rxjs'yi v5.5.5'e yükselttikten sonra hata oluşmaya devam etti.

+0

Bu benim için çalışıyor. Teşekkür ederim Evan, gönderdiğiniz için teşekkür ederiz! – bevada

+3

Teşekkürler..changed "rxjs": "^ 5.1.0" dan "rxjs": "5.5.2" şimdi çalışıyor – prash

+0

pathMatch ekleme: 'full' benim için de çalıştı! –

15

Eğik son sürümü hata. Tüm rotalara pathMatch: 'full' ekleyin.

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

bir sürüm numarası ve kaynak ekleyin olabilir mi? – Mick

+0

Sadece başarısız bir rota vardı - ben sadece, pathMatch ekleme çalıştı: Sadece bu rotaya 'tam' - işe yaramadı. Her rotaya eklemeniz gerekiyor. –

1

Angular 5.0.1 ve rxjs 5.5.3 ile aynı hatayla karşılaştım. Rota dizisindeki sırayı değiştirdiğimizde istisna ile karşılaşmadık. senin örneğin Yani:

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

genel yolunun (recipes) önce daha detaylı yol (recipes/:recipeName) koyarak.