<p dir="auto"><strong>I'm submitting a ...</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report
[ ] feature request
[ ] support request"><pre class="notranslate"><code class="notranslate">[x] bug report
[ ] feature request
[ ] support request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Returning <code class="notranslate">false</code> on CanDeactivate implementation influences browser history.<br>
Seems to be leftover from <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="167840766" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/10321" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/10321/hovercard" href="https://github.com/angular/angular/issues/10321">#10321</a> and <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="188882730" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/12825" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/12825/hovercard" href="https://github.com/angular/angular/issues/12825">#12825</a></p>
<p dir="auto"><strong>Expected behavior</strong><br>
Returning <code class="notranslate">false</code> on CanDeactivate implementation does not influence browser history.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
Present in Angular Routing Demo plnkr:<br>
<a href="https://angular.io/resources/live-examples/router/ts/eplnkr.html" rel="nofollow">https://angular.io/resources/live-examples/router/ts/eplnkr.html</a></p>
<p dir="auto"><em>STEPS TO REPRODUCE</em>:</p>
<ol dir="auto">
<li>Click "Crisis Center"</li>
<li>Click Crisis Center 1, then 2, then 3</li>
<li>Edit Crisis Center 3's "Name" in its details</li>
<li>Press browser "Back" button, and press "Cancel" when confirm dialog pops up asking if you want to discard changes</li>
<li>Press browser "Back" button again, but this time press "OK" when confirm dialog pops up asking if you want to discard changes</li>
<li><em>RESULT:</em><br>
You are taken back to Crisis Center 1 detail view instead of Crisis Center 2. If you press browser "Forward" button twice, you'll notice that both times you are taken to Crisis Center 3 detail view. The Crisis Center 3 detail view has essentially replaced the Crisis Center 2 detail view history entry.</li>
</ol>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
I press my browser's "Back" button but then choose to cancel navigation in order to first save pending changes. When I press my browser's "Back" button again, I should navigate to the previous page as if this was the first time I pressed my browser's "Back" button.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
-Angular demo plnkr (also present in my own ng-cli v1.0.0.24-beta environment)<br>
-Windows 10 x64</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.4.1, Router 3.4.1</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> Chrome v55.0.2883.87 m (64-bit) (untested on others)</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> TypeScript 2.0.10</p>
</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[X ] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[X ] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Currently, I have a deactivation guard on a route which will return false or true depending on a condition.  To get to this guarded route, the user must pass though 3 navigation step.  Now, once on the guarded route, when using <code class="notranslate">location.back()</code>, the guard is called. If it returns <code class="notranslate">true</code>, the previous route is loaded. If the guard returns false, the navigation is cancelled.  But if we redo a Location.back() after a failed navigation, the previous route that will be loaded will be 2 steps in the history instead of 1 (user perception).</p>
<p dir="auto">Workflow</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Main    -- navigate to     --&gt; Route 1
Route 1 -- navigate to     --&gt; Route 2
Route 2 -- navigate to     --&gt; Route 3
Route 3 -- location.back() --&gt; guard returns true  --&gt; Route 2
Route 2 -- navigate to     --&gt; Route 3
Route 3 -- location.back() --&gt; guard returns false --&gt; Route 3
Route 3 -- location.back() --&gt; guard returns true  --&gt; Route 1  (should be Route 2)"><pre class="notranslate"><code class="notranslate">Main    -- navigate to     --&gt; Route 1
Route 1 -- navigate to     --&gt; Route 2
Route 2 -- navigate to     --&gt; Route 3
Route 3 -- location.back() --&gt; guard returns true  --&gt; Route 2
Route 2 -- navigate to     --&gt; Route 3
Route 3 -- location.back() --&gt; guard returns false --&gt; Route 3
Route 3 -- location.back() --&gt; guard returns true  --&gt; Route 1  (should be Route 2)
</code></pre></div>
<p dir="auto"><strong>Expected behavior</strong><br>
An expected behavior for a user would be that navigating back brings back to the previous routed page.<br>
Workflow</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Main    -- navigate to     --&gt; Route 1
Route 1 -- navigate to     --&gt; Route 2
Route 2 -- navigate to     --&gt; Route 3
Route 3 -- location.back() --&gt; guard returns true  --&gt; Route 2
Route 2 -- navigate to     --&gt; Route 3
Route 3 -- location.back() --&gt; guard returns false --&gt; Route 3
Route 3 -- location.back() --&gt; guard returns true  --&gt; Route 2  (expected)"><pre class="notranslate"><code class="notranslate">Main    -- navigate to     --&gt; Route 1
Route 1 -- navigate to     --&gt; Route 2
Route 2 -- navigate to     --&gt; Route 3
Route 3 -- location.back() --&gt; guard returns true  --&gt; Route 2
Route 2 -- navigate to     --&gt; Route 3
Route 3 -- location.back() --&gt; guard returns false --&gt; Route 3
Route 3 -- location.back() --&gt; guard returns true  --&gt; Route 2  (expected)
</code></pre></div>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="https://embed.plnkr.co/k1iX7PzmOre7P6ACtcur/" rel="nofollow">Plnkr</a></p>
<ol dir="auto">
<li>Click button Nav to route1</li>
<li>Click button Nav to route2</li>
<li>Click button Nav to route3</li>
<li>Click button Block Nav Back</li>
<li>Click button Nav back
<ul dir="auto">
<li>BOGUE: The location.back() routed on Route1 instead of Route2</li>
</ul>
</li>
</ol>
<p dir="auto"><strong>Personnal investigation</strong><br>
After some investigation, I saw that in <code class="notranslate">routerState$.then</code> (<a href="https://sourcegraph.com/github.com/angular/angular@b5c4bf1c59c56d48b8a536aa61c7bd72d94c99fc/-/blob/modules/@angular/router/src/router.ts#L756" rel="nofollow">router.ts line 752</a>)  this logic used when <code class="notranslate">navigationIsSuccessful == false</code> is pretty simply but it is the actual cause of this bug.  Basically, when a deactivation guard is hit, the location of the browser is already changed to the previous route.  Which means that when the guard returns false, the <code class="notranslate">routerState$</code> runs his logic and calls <code class="notranslate">resetUrlToCurrentUrlTree()</code>.  At this point we can see that we replace the state of the current location.  But by doing this, we loose that route in the history which means that in my plunker, if we click the block nav back 3 times and then click the nav back we will actually kill the application.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
This is for me a pretty big bug since a guard that returns false breaks alters the current routing history.  In the case of our application this breaks the workflow and brings wrong business scopes to a user.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">Windows 10, NPM, Nodejs, Visual Studio 2015  (using nodejs for typescript compilation)</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.3.3</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [ all ]</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [TypeScript 2.0.10 | ES5]</p>
</li>
</ul>