Is There have any way for cancelling the pending Navigation request.

[dawn heart]

When the navigation request is pending, If I navigate to another route previous request need to be cancelled. It just getting success even the component was destroyed and get navigate to the previous route.

[rotund tusk]

So you're getting completed actions after navigation?

[next hearth]

try using rxjs switchMap

[limpid raven]

How are the two navigations initiated?

[dawn heart]

When a Navigation Request is in pending state, I just navigate the page to another route using
this.router.navigate(['/page1'], { queryParams: ... }) by using a button onclick method;

Is there have any way for cancel the pending Navigation Request, I already tried unsubscribe the router events, this.router.dispose() method on component destroy.

[limpid raven]

Any navigate call should already cancel a previous navigation request. The Router cannot do two navigations at once.
Why not use routerLink instead of a click handler?

Also, the video does now look like a Router navigation, it looks like you did a normal browser navigation with a <a href=>

[dawn heart]

I just reload the page, you can see in network tab the home page is requested and it is in pending state. Before the home page request's response, I just navigate to the another page using routerLink or router navigate method does not effect. Home page request is not canceled, after getting success the route redirect to the home page.

[limpid raven]

The "home page" navigation is initiated by the user in this case outside of your application. As far as the browser is concerned the user wants to navigate to the home page. I am not sure if the Browser will let JavaScript cancel such a navigation.