9

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 enter image description here

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.

BKM
  • 6,949
  • 7
  • 30
  • 45
  • 3
    Looking at the stack trace, you probably have a `first` pipe somewhere, as well as `takeUntil`. Your `takeUntil` notifier (in `ngOnDestroy` @ `TextblockComponent` ) closes the Observable before it can emit its first value, thus causing EmptyError. Change your pipe to `take(1)` instead of `first()` – ggradnig Mar 27 '19 at 14:59
  • @ggradnig Great help. Please post it as the answer I will accept it. Again thanks a lot – BKM Mar 27 '19 at 15:15
  • Sure, there you go. You're welcome! – ggradnig Mar 27 '19 at 15:24
  • 2
    Anybody got a good way to determine WHICH `first()` triggered the issue. I have my ideas (create a stack trace on creation and throw it as part of the error) but not sure how to do that in a nice way without forking everything. – Simon_Weaver Oct 03 '19 at 02:57

2 Answers2

36

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().

ggradnig
  • 13,119
  • 2
  • 37
  • 61
3

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.

Philipp Doerner
  • 1,090
  • 7
  • 24