ERROR EmptyErrorImpl {message: "no elements in sequence", name: "EmptyError"} in Angular 7

Question

I am getting a weird error while trying to navigate to different routes from a specific component. If I navigate to different routes from other components I am not seeing this error. I am attaching the screenshot of the error

I have searched for this issue and seems to be the problem with RxJS or empty routes. But I added pathMatch:'full' to empty routes and my RxJS version is 6.3.3. Any idea or anyone out here resolved the same issue could be of great help.

Answer 1

EmptyError is thrown by the first pipe if the source observable is closed before it could emit any notification.

Your stack trace shows that TextblockComponent triggers a takeUntil pipe in its ngOnDestroy function, which usually closes an Observable. It can be assumed that this closes the Observable that has the first pipe and thus causes an EmptyError.

The error can be circumvented by using take(1) instead of first().

Answer 2

This is the most popular question about this type of error (and one of the more modern ones since the "pathMatch: 'full'" bug has been fixed by now), so I would like to provide those that couldn't find a solution with ggradnig's reply (which nails in general though).

Look at your interceptors

If your HTTP requests get snatched up by an interceptor before they get sent out and that interceptor fails for some reason, your request will be stuck.

For an example that just took me the last 2 days to debug: If you are using JWT authentication, chances are you have an interceptor somewhere that attaches your access token to AJAX request so you do not have to do this manually all the time. If this interceptor snatches your request and you have not coded in any logic for if they don't find a token to attach to the request, you'll likely find yourself with this error.