1. 技术文章
  2. EmptyError: no elements in sequence

EmptyError: no elements in sequence

由 为君一笑 提交于 2019-11-28 09:36:31

This error happens when using RxJS 5.5.3 with angular (version 4/5), so just skip RxJS 5.5.3, and use RxJS 5.5.4 by adding "rxjs": "^5.5.4" to your project package.json.

Before RxJS 5.5.4 came out answer: (old, don't do this)

  • Lock version 5.5.2 RxJS on package.json source
  • add pathMatch: 'full' on empty paths source

It looks like this is an RxJS issue which should be patched pretty soon. source

In my case I've got those errors when I used first() in an Observable that had a takeUntil() emitted before first().

Example:

let test$ = new ReplaySubject(1);
let testAux$ = new ReplaySubject(1);
let test2$ = test$.asObservable().takeUntil(testAux$.asObservable());
test2$.first().subscribe(() => console.log('first!'));
testAux$.next(null);

It was hard to discover the problem because I returned an observable with takeUntil() in a service that was used by a different class (in a different file) that called first(), and the error was received during page navigation (because takeUntil() received an observable that emitted when the previous page was destroyed), and it appeared as the problem was in the navigation itself.

The weirdest thing is that the error happens when the next() is called, and not in the 2nd argument of subscribe(), causing the navigation process itself to fail. I don't know if this feature was chosen by the rxjs team to behave this way, because it makes much more difficult to isolate the problem.

According to this comment:

First will emit exactly one item or throw an error[...] If you would like to get at most one item from the observable, use .take(1).

Victor96

You need change to:

canActivate(route: ActivatedRouteSnapshot): Observable<boolean>{
   return new Observable<boolean>(resolve => {
      resolve.next(true);
      resolve.complete();
  });
}

================

I am unsure why but for me this error was caused by CanActivate router guards using observables. Moving to promises fixed the issue however.

I moved from this:

canActivate(route: ActivatedRouteSnapshot): Observable<boolean>{
     return new Observable<boolean>(resolve => {

          resolve.complete(true);
        //or
          resolve.complete(false);

    });
}

to this:

canActivate(route: ActivatedRouteSnapshot){
     return true;
        //or
          return false;

    });
}

Add this property to your route.

pathMatch: 'full

for eg.

{ pathMatch: 'full', path: "", component: HomeComponent }

It worked for me.

Had the same issue because I was doing a .first() after a this.http.get(); Http.get returns a cold observable so first was not needed because cold observables unsubscribe themselves.

this.http.get().pipe(first()); -> EmptyError: no elements in sequence

I had this issue in Angular 6 / RxJs 6 and found it was due to my guard having a redirect and complete right after it.

Before:

if (!res) {
  this.router.navigate(['/']);
  observer.complete(); // <-- This was the offender
}

After:

if (!res) {
  this.router.navigate(['/']);
}

In my case, using version 5.5.12 of rxjs, I had trouble with this in a CanActivate scenario. But the solution for me was very easy in the end. I changed my code from

const guard: Subject<boolean> = new Subject<boolean>();

to

const guard: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);

Calling 

guard.next(...);
guard.complete();

later. That did the trick. So no .first nor promises needed in my scenario.

For anyone coming here because of the error message, this was happening to us because we were returning a void Observable. You need to return at lease some value like "true".

return of(true);
Monima Baruah

None of the above worked for it. This is what worked for me. In the route definition:

{ path: '', component: WelcomeComponent, pathMatch: 'full' },
标签
angular
angular2-routing
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!