routerLinkActive does not updates on router.navigate to the same route

Bug Report

Description

If we have some components that use router.navigate for the same route but with empty object or null for queryParams, then routerLinkActive directive does mark links as active. The use case to pass empty object is to pass some filters through query parameters to be able to share the link to the page.

Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-brrc3a Here we have 2 components with service provided for each component. Service performs the navigation using:

this.router.navigate(['.'], {
      queryParams: {},
      relativeTo: this.route
});

After this any link will not be marked as active. If reload the page with preset url (ex: /one), then the link will be marked. But navigation to another route will not remove active state from the link.

Your Environment

Angular Version:

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1002.0
@angular-devkit/build-angular   0.1002.0
@angular-devkit/core            10.2.0
@angular-devkit/schematics      10.2.0
@angular/cdk                    10.2.7
@angular/cli                    10.2.0
@angular/material               10.2.7
@schematics/angular             10.2.0
@schematics/update              0.1002.0
rxjs                            6.5.4
typescript                      4.0.3

[atscott]

@Airblader yep, pretty sure. The navigation from the service is triggered before the previous one completes.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}