Issue with Router event

Question

I have the following piece of code:

 this.routerSubscription = this._router.events
     .filter(event => event instanceof NavigationStart)
     .subscribe((event:Event) => {
        ....
     });

Which throws me an error of:

error TS2345: Argument of type '(event: Event) => void' is not assignable to parameter of type 'NextObserver<NavigationStart | NavigationEnd | NavigationCancel | NavigationError> | ErrorObserve...'.
  Type '(event: Event) => void' is not assignable to type '(value: NavigationStart | NavigationEnd | NavigationCancel | NavigationError) => void'.
    Types of parameters 'event' and 'value' are incompatible.
      Type 'NavigationStart | NavigationEnd | NavigationCancel | NavigationError' is not assignable to type 'Event'.
        Type 'NavigationStart' is not assignable to type 'Event'.
          Property 'bubbles' is missing in type 'NavigationStart'.

What am I doing wrong?

score 21 · Answer 1 · edited May 23 '17 at 11:54

21

I guess you forgot about:

import { Event } from '@angular/router';

Or use it like:

import { Event as NavigationEvent } from '@angular/router';
...
.subscribe((event: NavigationEvent)

See also

How to detect a route change in Angular 2?

edited May 23 '17 at 11:54

Community

1
1

answered Dec 27 '16 at 14:18

yurzui

205,937
32
433
399

score 1 · Answer 2 · answered Aug 08 '23 at 14:41

In my case, the solution wasn't about importing the Event interface.
Instead, the key was to utilize a TypeScript type guard to explicitly inform the TypeScript compiler about the type of event once it passes through the filter function of RxJS.

using your code as an example:

 this.routerSubscription = this._router.events
     .filter((event) : event is NavigationStart => event instanceof NavigationStart)
     .subscribe((event) => {
        // Your logic here...
     });

Notice how we surrounded the event argument with parentheses and added the type guard ((event): event is NavigationStart).
This way, the Typescript compiler understands that if the arrow function returns true, event is guaranteed to be of type NavigationStart.
With the type guard in place, TypeScript will treat event as NavigationStart within the subscribe method.

Issue with Router event

2 Answers2