Why does Router Event throws only scroll event post angular update from 13 to 15.2.9

Question

I upgraded the angular version from 13 to 15.2.9 and I observed is the Router Functionality is breaking. The Router Event is only throwing SCROLL EVENT Instead Navigation End. Please suggest where am I missing something or how to fix the routing issue.

The Scroll Event is appearing as scroll(anchor:'null',position:'null') .

I need the complete router event to trigger and at last Navigation End to appear so that I can capture it in my component.

Answer 1

I have been getting the same problem after updating from Angular 13 to 15. This is my workaround:

this.router.events
  .pipe(
    filter((event) => event instanceof NavigationEnd || (event instanceof Scroll && event.routerEvent instanceof NavigationEnd)),
    map((event) => event instanceof Scroll ? event.routerEvent as NavigationEnd : event as NavigationEnd),
  )

Answer 2

I just had the same issue (with Angular 17), for me, it was a rookie mistake.

So like you, I was just getting the Scroll event and could not understand why.

It turns out that for my case, it's because I had placed the code to listen to router event within ngOnInit() of my component.

So by the time this code was run, all the other event from the router where already thrown.

The solution was to move the code to the constructor of my component.