<p dir="auto">See the following Plunker for repro: <a href="http://plnkr.co/edit/MrCUDP8qwGPj7ler4ySW" rel="nofollow">http://plnkr.co/edit/MrCUDP8qwGPj7ler4ySW</a></p>
<p dir="auto">The code <code class="notranslate">[class.selected]="toggleSvc.isActive | async"</code> where toggleSvc.isActive is a BehaviorSubject results in the following error message:</p>
<blockquote>
<p dir="auto">EXCEPTION: Expression 'toggleSvc.isActive | async in AppComponent@1:7' has changed after it was checked. Previous value: 'true'. Current value: 'true' in [toggleSvc.isActive | async in AppComponent@1:7]</p>
</blockquote>
<p dir="auto">I don't see how the value is changed after change detection - ng2 even says that it stayed the same in this error message (true -&gt; true).</p>
<p dir="auto">Don't exactly know if this is related only to class property bindings or to all kinds, because this is currently the main thing that I'm observing.</p>
<p dir="auto">Replacing the line with <code class="notranslate">[class.selected]="toggleSvc._isActive"</code> makes it run correctly.<br>
The binding in the content (<code class="notranslate">Active: {{toggleSvc.isActive | async}}</code>) works without issues.</p>
<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>
When both a route and it's parent have an asynchronous <code class="notranslate">canActivate</code> guard, and the child is navigated to directly, both guards are run at same time.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
The parent's <code class="notranslate">canActivate</code> guard should run before the child's guard.  If the parent's guard is unsuccessful the child guard should not be run.  If a route defines multiple <code class="notranslate">canActivate</code> guards, those can/should be run in parallel.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="http://plnkr.co/edit/s4R0INS7qjuFnRpyD8eF?p=preview" rel="nofollow">http://plnkr.co/edit/s4R0INS7qjuFnRpyD8eF?p=preview</a></p>
<p dir="auto">Plunker has a nested route <code class="notranslate">/parent/child</code>.  Both have guards that simply wait and then return true.  Each guard logs its start/end as well as a tick once per second to a logging service that is displayed in the root component.</p>
<p dir="auto">Click 'Go to Child` to trigger both the Parent Guard and the Child guard at the same time, and observe that they process simultaneously in the log.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">In my athepp, <code class="notranslate">ParentGuard</code> checks to see if the user is authenticated and redirects accordingly, and <code class="notranslate">ChildGuard</code> loads protected data. Right now, my child guard cannot assume the user is logged in, so I have to duplicate logic from the authorization guard to wait for the user to be loaded. When I have a grandchild route, that has to duplicate logic from two parent guards.  I would like to be able to separate concerns more rather than duplicate auth logic in all my guards.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<ul dir="auto">
<li><strong>Angular version:</strong> 4.0.1</li>
</ul>