<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 =&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>
What we're trying to achieve:</p>
<ul dir="auto">
<li>We have implemented a resolve guard in a lazily loaded module that will navigate to an error component on failure to retrieve data.</li>
<li>The resolve guard will also store the failure message in a field of itself.</li>
<li>The error component takes the resolve guard as a dependency, and displays the error message from it.</li>
</ul>
<p dir="auto">Our implementation is very similar to the Tour of Heroes example with the resolve guard navigating to another page on failure. See this <a href="https://angular.io/resources/live-examples/router/ts/eplnkr.html" rel="nofollow">plunkr example</a>, and click on any crisis under the <code class="notranslate">Crisis Center</code></p>
<p dir="auto">We have produced an example of the problem by extending the Tour of Heroes example.</p>
<p dir="auto">When <code class="notranslate">CrisisCenterModule</code> is lazily loaded, we have observed:</p>
<ul dir="auto">
<li>The resolver instance for <code class="notranslate">CrisisDetailComponent</code> is different to the instance being injected in to <code class="notranslate">ErrorComponent</code>, which is a sibling route to the activate route. We have confirmed that the resolver is only provided inside the <code class="notranslate">CrisisCenterRoutingModule</code>, which is inside the lazily loaded module.</li>
<li>We can see that the <code class="notranslate">CrisisCenterModule</code> and all it's contained modules and components are instantiated twice, with different injectors.</li>
</ul>
<p dir="auto">When <code class="notranslate">CrisisCenterModule</code> module is not lazily loaded, this problem does not occur.</p>
<p dir="auto">This was previously working when we were using Angular 2.1.0, until we upgraded to 2.3.1/2.4.1. We narrowed it down to when the version of <code class="notranslate">@angular/router</code> changed from <code class="notranslate">3.1.0</code> to <code class="notranslate">3.2.0</code>. This problem did not occur with the beta and RC versions of <code class="notranslate">3.2.0</code>.</p>
<p dir="auto">We did consider using an intermediate service for the resolver to share the error message to another component, but we experienced the same issue with multiple instances of this service.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Clicking on a crisis under the <code class="notranslate">Crisis Center</code> in this <a href="https://embed.plnkr.co/DLDxPgCmBdJ10SrnP995/" rel="nofollow">plunkr example</a>, you will see <code class="notranslate">Error component - error message:</code>, whereas we expect to see <code class="notranslate">Error component - error message: error</code>.</p>
<p dir="auto">We created another <a href="https://embed.plnkr.co/G56i8ndB8HKsUcjlUgwN/" rel="nofollow">plunkr example</a> where <code class="notranslate">CrisisCenterModule</code> module is not lazily loaded, and the problem does not occur.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
We have modified Tour of Heroes example in the following ways:</p>
<ul dir="auto">
<li><code class="notranslate">app/crisis-center/crisis-detail-resolver.service.ts</code> - Modified to always set the <code class="notranslate">errorMessage</code> field, and navigate to the <code class="notranslate">ErrorComponent</code>.</li>
<li><code class="notranslate">app/crisis-center/error.component.ts</code>- Newly added. Displays the <code class="notranslate">errorMessage</code> field from the injected <code class="notranslate">CrisisDetailResolver</code>.</li>
</ul>
<p dir="auto">You can download <a href="https://github.com/jbridger/angular2-lazy-load-injection.git">this example Github project</a> where  the <code class="notranslate">@angular/router</code> version is <code class="notranslate">3.2.0</code>. To run:</p>
<ul dir="auto">
<li>npm install</li>
<li>npm run</li>
<li>Open <code class="notranslate">http://localhost:4200</code></li>
<li>Click on a crisis under the <code class="notranslate">Crisis Center</code></li>
<li>You will see <code class="notranslate">Error component - This is the error message:</code>, which is missing the error message from the resolver.</li>
<li>You can see in the console log that the <code class="notranslate">CrisisCenterModule</code> is instantiated twice with different injectors, and the error message is not displayed.</li>
</ul>
<p dir="auto">To see it working, you must switch the version of <code class="notranslate">@angular/router</code> to <code class="notranslate">3.1.0</code> in <code class="notranslate">packages.json</code>, clear the <code class="notranslate">npm_modules</code> folder, and re-run the above steps. You should see the following displayed: <code class="notranslate">Error component - This is the error message:I failed to load crisis</code>. You will also see in the console log that components are only being initialised once.</p>
<p dir="auto">Alternatively, you can reproduce with this <a href="https://embed.plnkr.co/DLDxPgCmBdJ10SrnP995/" rel="nofollow">plunkr example</a>.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
We want the resolver to handle failure to load data and navigate to a component that can handle this failure appropriately. This seems to be the pattern that is shown in the Tour of Heroes example (from the Routing advanced guide).</p>
<p dir="auto">The alternative would be to modify the resolver to wrap failures in a result object, and let the activated route component handle success and failure cases. We'd like to avoid this, as it would make the component more complex.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li>
<p dir="auto">Mac OS X 10.11.5</p>
</li>
<li>
<p dir="auto"><strong>Angular version:</strong> 2.4.1. <code class="notranslate">@angular/router</code> at <code class="notranslate">3.4.1</code>. Works when router is at <code class="notranslate">3.1.0</code>.</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> Chrome 55.0.2883.95</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> TypeScript 2.0.3</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =   6.2.1</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>
After upgrading to router 3.2.0, services being provided by component module are being instantiated twice. Once while resolver is being run (last place in router is PreActivation.prototype.getToken)  and then again later during activation (last place in router is RouterOutlet.prototype.activate).<br>
Upgrading rest of Angular to 2.2.0 and leaving router at 3.1.1 it works as it used to (and looking in debugger I see service is only instantiated from PreActivation.prototype.getToken)</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">Providers should only be instantiated once - as they are when using router version 3.1.1</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto">Haven't yet reproduced in a plnkr but my use case has a lazy loaded component that itself has sub components (not lazy loaded). The sub component has a resolver that uses a service, and the sub component itself uses the service. The service is included in the lazy loaded components module providers list and is being instantiated twice. Once apparently while router is working on resolve and once when component is being activated.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">Its just wrong, and my service fetches data on initialization so extra instance causes extra fetch. This does not happen with router 3.1.1 (never tried 3.1.2 as deactivate guards don't work correctly in that version)</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">Windows 10, Visual Studio Code, angular-cli: 1.0.0-beta.19-3 ng serve</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X</li>
</ul>

<p dir="auto">2.2.0</p>
<ul dir="auto">
<li><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]</li>
</ul>

<p dir="auto">Only tried in Chrome</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
Typescript 2.0.9</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</p>
</li>
</ul>