Angular 7 Router Bug - skipLocationChange still shows url in browser

[tgfactor]

🐞 bug report

Affected Package

@angular-router

Is this a regression?

No

Description

I have a requirement for my angular application that the url address bar at the top of my browser cannot be updated with any path change. So far, I have been successful by adding the "skipLocationChange: true" navigationExtra to all my navigate calls, but when I use the router.navigate or router.navigateByUrl calls in interceptors and (more problematically) guards, the url address bar changes to the path I was originally going to before I was redirected.

One temporary solution I came up with for the interceptors was placing the navigate call inside a setTimeout(). I don't know if that is the correct way of handling interceptor redirection, but it stopped posting the previous path in the browser address bar. However, when I use canActivate guards that redirect for invalid access, it always produces the path prior to redirection in the browser address bar, with or without the setTimeout. This has been an issue for 7.2 in general since I started the project.

🔬 Minimal Reproduction

Easier to discuss rather than produce on stackblitz.
Application moves to a new screen:

this.router.navigate(['/newscreen', 'screen2'], {skipLocationChange: true});

Application navigates to the screen component, which then makes an API call:

this.httpClient.get('/someAPI/someMethod')

Unbeknownst to the application, the authentication token for the user has expired. So when the call gets made through my token interceptor, an HttpErrorResponse object gets sent back to the application, and gets caught in the catchError section of my interceptor.

if (error instanceof HttpErrorResponse) {
    if (error.status === 401) {
        setTimeout(() => {
            this.router.navigate(['/not-authenticated'], {skipLocationChange: true});
        });
        return EMPTY;
    }
}
return throwError(error);

If I do not have this setTimeout call here, the browser address bar changes to localhost:4200/newscreen/screen_2, when it should actually stay at localhost:4200 only.

In addition, I tried using a canActivate AuthGuard for accessing a component. In the code, right after my authentication expired, I clicked a button that would send me to root of the application.

this.router.navigate([''], {skipLocationChange: true});

In my routing, I have the '' path redirecting to my HomeComponent, which has the canActivate AuthGuard, containing the following code:

const userToken = this.authService.getAccessToken();
if (userToken) {
  return true;
}
setTimeout(() => {
  this.router.navigate(['not-authenticated'], {skipLocationChange: true});
});
return false;

The guard catches the lost authentication, and redirects the user to the not-authenticated page. However, in the browser address bar, if '/newscreen/screen_3' was my last path/page I was on, it would NOT be localhost:4200; it would be localhost:4200/newscreen/screen_3.

This happens everytime I use guards or resolves, and I don't know if this is the normal use of angular routing, or if this is a bug that needs to be fixed.

🔥 Exception or Error

🌍 Your Environment

Angular Version:

Angular CLI: 7.3.8
Node: 11.8.0
OS: win32 x64
Angular: 7.2.12
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.8
@angular-devkit/build-angular     0.13.8
@angular-devkit/build-optimizer   0.13.8
@angular-devkit/build-webpack     0.13.8
@angular-devkit/core              7.3.8
@angular-devkit/schematics        7.3.8
@angular/cli                      7.3.8
@ngtools/webpack                  7.3.8
@schematics/angular               7.3.8
@schematics/update                0.13.8
rxjs                              6.4.0
typescript                        3.2.4
webpack                           4.29.0

Anything else relevant?

[jasonaden]

Thanks for the issue. I understand what you're saying on the discussion, but a reproduction would also help quite a bit. It's hard to test what you're saying without having a reproduction, or see if it's due to something in your code or in the Angular code.

I think requiring the setTimeout's is fundamentally wrong. But sounds like there's something that's making it needed. A reproduction might help track that down.

[manughub]

@tgfactor any luck coming up with a repro ?

[sivabhusarapu]

this can be reproducible if you navigate to the same route with router.navigate() function.

[hybridx]

this.router.navigate(['/any/location', {
      queryParam: 'someThing'                           // Still visible
      skipLocationChange: true,
    }
  ]);

Here is the code if you would like

[atscott]

Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem. Like Jason, I understand the description of the issue but was unable to reproduce the problem in a new CLI project. Please check out our submission guidelines to understand why we can't act on issues that are lacking important information.

If the problem still exists in your application, please open a new issue and follow the instructions in the issue template, including a reproduction in either stackblitz or a github project.

[thomasesh]

I have the same issue, but it works if my authguard returns true after the navigate call, even if the user is not authenticated. Here is your code with the return true. (I also need the setTimeout call).

const userToken = this.authService.getAccessToken();
if (userToken) {
  return true;
}
setTimeout(() => {
  this.router.navigate(['not-authenticated'], {skipLocationChange: true});
});
return true;

[angular-automatic-lock-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.}