<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></p>

<p dir="auto">Given CanDeactivate is setup to warn user of navigation (via confirm or whatever)</p>
<ol dir="auto">
<li>user clicks back</li>
<li>unsaved warning comes up</li>
<li>user clicks to cancel navigation</li>
<li>user clicks back</li>
<li>user accepts the navigation</li>
<li>user is taken back two route changes</li>
</ol>
<p dir="auto">If the user continues to click back but cancelling then eventually they will leave the webapp</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/6/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/6">@6</a> user is taken to the previous page/route. If the user cancels then the browser history state should be the same as before they tried to navigate.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto">Follow instructions on plnkr<br>
<a href="http://plnkr.co/edit/X9KfCvIs2m7lsLiygYk4?p=preview" rel="nofollow">http://plnkr.co/edit/X9KfCvIs2m7lsLiygYk4?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">If CanDeactivate is used to warn about unsaved changes, they click back then decide to cancel but later decide to go back anyway. The user should be presented with the previous page.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">OS: Windows 7<br>
Using Angular 2 with webpack</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.4.4</li>
</ul>

<ul dir="auto">
<li><strong>Browser:</strong> Chrome 55</li>
</ul>

<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> TypeScript 2.0.2</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =  v7.3.0</p>
</li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] feature request"><pre class="notranslate"><code class="notranslate">[x] feature request
</code></pre></div>
<ul dir="auto">
<li><strong>Angular version:</strong> 2</li>
</ul>
<p dir="auto">Reactive forms is meant to be used in complex forms but control's <code class="notranslate">valueChanges</code> are <code class="notranslate">Observable&lt;any&gt;</code>, which are totally against good practices for complex code.</p>
<p dir="auto">There should be a way to create strongly typed form controls.</p>