Why is Angular 16 breaking RouterEvent constructor? (MSAL)

Question

I have had MSAL working fine with Angular up until version 16 that was just released.

Currently I am facing the following error:

Error: src/app/app.component.ts:34:34 - error TS2769: No overload matches this call.
  Overload 1 of 3, '(observer?: Partial<Observer<Event_2>>): Subscription', gave the following error.
    Type '(e: RouterEvent) => void' has no properties in common with type 'Partial<Observer<Event_2>>'.
  Overload 2 of 3, '(next: (value: Event_2) => void): Subscription', gave the following error.
    Argument of type '(e: RouterEvent) => void' is not assignable to parameter of type '(value: Event_2) => void'.
      Types of parameters 'e' and 'value' are incompatible.
        Type 'Event_2' is not assignable to type 'RouterEvent'.
          Type 'RouteConfigLoadStart' is missing the following properties from type 'RouterEvent': id, url
  Overload 3 of 3, '(next?: (value: Event_2) => void, error?: (error: any) => void, complete?: () => void): Subscription', gave the following error.
    Argument of type '(e: RouterEvent) => void' is not assignable to parameter of type '(value: Event_2) => void'.
      Types of parameters 'e' and 'value' are incompatible.
        Type 'Event_2' is not assignable to type 'RouterEvent'.

34     this.router.events.subscribe((e : RouterEvent) => {

I know that in the upgrade notes of Angular 15 -> 16 it lists the following but I am not sure how this is resolved.

The Event union no longer contains RouterEvent, which means that if you're using the Event 
type you may have to change the type definition from (e: Event) to (e: Event|RouterEvent)

Below is the code that exists in the component.

  constructor(@Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration
  ,private router: Router, private broadcastService: MsalBroadcastService, private authService: MsalService) { 
    this.router.events.subscribe((e : RouterEvent) => {
      this.navigationInterceptor(e);
    })
  }

Any advice would be greatly appreciated!

Answer 1

You need to import Event from @angular/router.

import {
  ActivatedRoute,
  NavigationEnd,
  Router,
  RouterEvent,
  Event, // Ensure this is in the list of imports from @angular/router
} from '@angular/router';

Answer 2

So eventually, accumulating the stuff mentioned in comments and existing answers, the way that worked for me was following the official docs' example and adding the Event import with further narrowing the event type down if some particular properties (like url) are necessary, something like:

this.router.events.pipe(
  filter((event: Event | RouterEvent) => event instanceof NavigationEnd) // or RouterEvent, or whatnot
).subscribe((event: NavigationEnd) => {
  console.log(event.url)
});