Filtering for NavigationEnd events in Angular 12?

Question

In Angular 11 this works:

this.r.events.pipe(
    filter(event => event instanceof NavigationEnd),
    map((event: NavigationEnd) => event.url == ROUTES.APPLICATION))

However in Angular 12 it produces the error:

Argument of type 'MonoTypeOperatorFunction<Event_2>' is not assignable to parameter of type 'OperatorFunction<Event_2, NavigationEnd>'.
Type 'Observable<Event_2>' is not assignable to type 'Observable'.
Type 'Event_2' is not assignable to type 'NavigationEnd'.
Property 'urlAfterRedirects' is missing in type 'RouterEvent' but required in type 'NavigationEnd'.ts(2345)

Any ideas on how to fix this?

This question has the answer as adding:

"paths": {
    "rxjs": [
      "node_modules/rxjs"
    ],
    "rxjs/*": [
      "node_modules/rxjs/*"
    ]
}

To tsconfig.json. However that did not work ...

pixelbandito · Accepted Answer · 2021-07-22 03:47:51Z

21

Update: Did a Google, this looks promising. Looks like a compact form of the type predicate I mentioned below. (Source)

filter((event): event is NavigationEnd => event instanceof NavigationEnd))

It would be really helpful to know the initial type of the event argument in .filter(event => event instanceof NavigationEnd)

Do you have a TypeScript plugin installed in your IDE? In VSCode and Atom, at least, plugins can show the types of variables in-line as you write your code. That would help you track down where the mismatch is.

If event => event instanceof NavigationEnd isn't sufficient to stop TS from barfing on the next line's type assertion (event: NavigationEnd), then maybe a type predicate would help?

edited Jul 22, 2021 at 3:47

answered Jul 22, 2021 at 3:24

pixelbandito

5857 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ole Over a year ago

The error is produced by compiling Angular using the CLI ... It worked fine in Angular 11 ... The event instance is some event that the router produces ... so ... it should be pretty straight forward ... Famous last words :)

Peter Nixey · Accepted Answer · 2022-11-24 12:11:37Z

3

I found this very frustrating.

The fix for me was making sure that Event was imported from @angular/router. The linting doesn't suggest that the lack of Event import is the error but it certainly fixes things:

import { Event, NavigationEnd, Router } from '@angular/router'

# NB notice declaration of event as type Event below
filter((event: Event): event is NavigationEnd => event instanceof NavigationEnd))

this makes it work for all router events too:

router.events.pipe(
  filter((event: Event): event is RouterEvent =>
    event instanceof RouterEvent
  )
)

answered Nov 24, 2022 at 12:11

Peter Nixey

16.6k15 gold badges86 silver badges147 bronze badges

1 Comment

jarodsmk Over a year ago

In my case - VS Code 'quick actions' lead me to import 'filter' from the incorrect package (lodash). Glad I caught this after only 10 mins :')

Collectives™ on Stack Overflow

Filtering for NavigationEnd events in Angular 12?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related