Router navigate and navigateByURL don't work properly

🐞 bug report

 //browser is already on /pathName/oldID, this means the angular routes are correct.
 let newLocation = `/pathName/${newID}`;
          // shouldn't need to do this
         this.router.routeReuseStrategy.shouldReuseRoute = function () {
            return false;
         };
         this.router
            .navigateByUrl(newLocation)
            .then(
               (worked) => {
                  //works only because we hooked the routeReuseStrategy.shouldReuseRoute above
               },
               (error) => {
                  debugger;
               }
            );

Affected Package

@angular/Router

Is this a regression?

Not sure.

Description

In everything but Angular, navigate and navigateByUrl does exactly that.

While the code above does work when navigating to a new URL, there should instead be an option in the navigate and navgateByURL functions. Which only apply to a single navigation.

  let IReallyWantToDoIt = true;
  this.router.navigateByUrl(newLocation, IReallyWantToDoIt)

All code above is all that’s needed to reproduce and this issue is well known.

🔥 Exception or Error

There is no exception, rather the url is replaced without navigating, that alone should be an error. If the address bar has a url in it which changes after the navigation, it should go there. Having a program change it but not navigate is odd behavior.

🌍 Your Environment

Angular Version:

 
Angular CLI: 10.0.1
Node: 12.18.0
OS: win32 x64

Angular: 10.0.3
... core
Ivy Workspace: Yes

Package                             Version
-------------------------------------------------------------
@angular-devkit/architect           0.901.10
@angular-devkit/build-angular       0.1000.1
@angular-devkit/build-optimizer     0.901.11
@angular-devkit/build-webpack       0.1000.1
@angular-devkit/core                10.0.1
@angular-devkit/schematics          10.0.1
@angular/animations                 10.0.2
@angular/cdk                        10.0.1
@angular/cli                        10.0.1
@angular/common                     10.0.2
@angular/compiler                   10.0.2
@angular/compiler-cli               10.0.2
@angular/forms                      10.0.2
@angular/language-service           10.0.2
@angular/material                   10.0.1
@angular/platform-browser           10.0.2
@angular/platform-browser-dynamic   10.0.2
@angular/router                     10.0.2
@ngtools/webpack                    8.3.28
@schematics/angular                 10.0.1
@schematics/update                  0.1000.1
rxjs                                6.6.0
typescript                          3.9.6
webpack                             4.43.0

Anything else relevant? We shouldn’t have to do this:

window.location.href = newURL;

Please advise.

[atscott]

https://stackblitz.com/edit/angular-ivy-7tx5vt Demonstrates that this appears to be working as expected.

Rather than keep this open, I’m closing this as working as expected based on the provided example. However, if you can provide a reproduction in StackBlitz or a minimal GitHub repo, please open a new issue and we can go from there with a clean slate.

[mgechev]

@Javaman2, thank you for reporting the behavior and trying to make Angular better. @Airblader, thanks for looking into this so quickly and providing initial thoughts and feedback.

Let’s keep the conversation constructive, please. As an owner of the router @atscott will look at it and share his thoughts as well.