Unable to navigate to previous route path after navigating multiple times during the initial load of the project window

[samuelzapote]

🐞 bug report

Affected Package

This is an issue only with Google Chrome and the back navigation button. This issue is not present in Firefox, Safari or IE11

Is this a regression?

The same behaviour happens in v7

Description

Lets say you implement the router.navigate within the app.component.ts's OnInit in order to navigate to a certain path, say /foo with component foo.component.ts

and then,

implement another router.navigate within that component's OnInit in order to navigate to path /bar with component bar.component.ts.

Now if you ONLY press the browser back button, then the browser navigates out of the project into an empty tab (what you started with).

But if you click inside the window before pressing the back button, then it will navigate back to the previous tab /foo (which would then navigate to /bar again very quickly, but at least it does not navigate out of the project).

The expected behaviour is to be able to navigate back to the previous route without having to click inside the window.

🔬 Minimal Reproduction

In all reproductions, if you click inside the window, the back navigation works as intended, and will continue to work if you refresh the page or the project hot reloads. But once you open it in a new tab and DONT click inside the window, the bug emerges.

Stackblitz Reproduction. In this reproduction, after loading the project, open this same link in a new tab. You'll notice that the back button is greyed out and can not be used. https://angular-back-navigation-bug.stackblitz.io/

I've made a small reproduction and placed it inside a repository to be tested on Google Chrome browsers https://github.com/samuelzapote/angular-navigation-back-bug-011420

🔥 Exception or Error

🌍 Your Environment

Angular Version:

Angular CLI: 8.3.22
Node: 12.13.0
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.22
@angular-devkit/build-angular     0.803.22
@angular-devkit/build-optimizer   0.803.22
@angular-devkit/build-webpack     0.803.22
@angular-devkit/core              8.3.22
@angular-devkit/schematics        8.3.22
@angular/cli                      8.3.22
@ngtools/webpack                  8.3.22
@schematics/angular               8.3.22
@schematics/update                0.803.22
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

Anything else relevant?

This issue is only present in Google Chrome

[javarv87]

Same issue https://stackoverflow.com/questions/59755838/browser-back-behaviour-angular

With angular 5,6,7 and now 8 the same behavior. i'm not sure if should be an issue with Angular or Chrome On Opera, and Chrome 75 -> 79 (Tested) the same behaviour Firefox, Edge, Safari, works normal On Chrome 70->74 works fine

[BAJWA1516]

I have found the solution > put this property 'skipLocationChange : true'

this._Router.navigate([], {relativeTo: this.route , queryParams, queryParamsHandling: 'merge', // remove to replace all query params by provided skipLocationChange:true, // fix for going back properly to prev route
}