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

Answer 1

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?