<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>
Basically I have 2 guards a child and a parent. The child guard navigates to a child route. The problem is the child guard is getting resolved before the parent.</p>
<p dir="auto"><a href="https://plnkr.co/edit/yK0eGoUGIVvKZu45jSBs?p=preview" rel="nofollow">Here is a plunker</a>.</p>
<p dir="auto">Also seems related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="173980107" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/11161" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/11161/hovercard" href="https://github.com/angular/angular/issues/11161">#11161</a> but from what the tests look like on that merge, it isn't doing what I describe here.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
I need a way to tell the child guard to wait until the parent has returned true before continuing.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
OSX, VIM/Sublime, Webpack</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
2.3.0</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5] TS2</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="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] 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">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] 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>
CanActivate[Child] Guards run, parent-first, in parallel, meaning there is no way to resolve data in a parent that may be needed in child guards, unless managed explicitly elsewhere.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
A CanActivate[Child] guard's behavior could possibly be set to block children guards from.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
        path: 'parent',
        canActivateChild: [FiveSecondObservableGuard], // Takes a long time
        children: [
            {
                path: 'child',
                component: ChildComponent, // waits a long time, as expected
                canActivate: [AuthGuard] // Runs immediately
            }
]
}"><pre class="notranslate"><span class="pl-kos">{</span>
        <span class="pl-c1">path</span>: <span class="pl-s">'parent'</span><span class="pl-kos">,</span>
        <span class="pl-c1">canActivateChild</span>: <span class="pl-kos">[</span><span class="pl-v">FiveSecondObservableGuard</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-c">// Takes a long time</span>
        <span class="pl-c1">children</span>: <span class="pl-kos">[</span>
            <span class="pl-kos">{</span>
                <span class="pl-c1">path</span>: <span class="pl-s">'child'</span><span class="pl-kos">,</span>
                <span class="pl-c1">component</span>: <span class="pl-v">ChildComponent</span><span class="pl-kos">,</span> <span class="pl-c">// waits a long time, as expected</span>
                <span class="pl-c1">canActivate</span>: <span class="pl-kos">[</span><span class="pl-v">AuthGuard</span><span class="pl-kos">]</span> <span class="pl-c">// Runs immediately</span>
            <span class="pl-kos">}</span>
<span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Loading server information/flags that are required in all Guards can now be done in two ways:</p>
<ul dir="auto">
<li>in <code class="notranslate">APP_INITIALIZER</code>, which severely hinders UX choices/flexibility</li>
<li>Making all requests for server data asynchronous, making the whole codebase needlessly complex.</li>
</ul>
<p dir="auto">When a certain branch of routes is behind an AuthGuard that may need asynchronous loading, while the components respect the Guard the Guards themselves (which may require user identification to be complete) won't necessarily have access to that (unless all data is made asynchronous, as mentioned above)</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> all</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> all</p>
</li>
</ul>