<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"><pre class="notranslate"><code class="notranslate">[x ] bug report =&gt; search github for a similar issue or PR before submitting
</code></pre></div>
<p dir="auto">I've encountered an issue where a resolve route-guard did not share the same service with a component that is registered to the same module the Resolve guard is.</p>
<p dir="auto">I have a scenario where the resolve guard of a route bound to a lazy loaded module retrieves a list of data from the backend and caches it on a variable within the service. The same service has another method (that is called from a component) which retrieves fine grained data, first by looking within the cached data, and if not found retrievs that particular subset of data from backend. The issue is that the the <strong>Service is recreated</strong> when the component is visited as well, <strong>thus losing the cached data</strong>.</p>
<p dir="auto">I've been boggling my mind around this issue and I cannot seem to make sense of what is happening. I've read the docs on dependency injection, hierarchical injection and modules. From my understanding the application has a root injector which is bound to the AppModule that is bootstrapped. Child injectors are created for each component, and for each lazy loaded module. Whenever a Service is needed, first the service is looked within the injector bound to the Component, and if not found, checkes in the parent component, and continues going up through the injector tree until reaching the module injector (and if not found here throws an error).</p>
<p dir="auto">Now if the Service I needed is 'provided' within the lazy loaded module, shouldn't the Resolve guard and the component share the same Singleton Service bound to the module injector? I'm reporting this as a bug because 1) the docs does imply that, and 2) this problem seems to be occuring only with injectors of lazy loaded modules, and not the root module. See the following plunker.</p>
<p dir="auto"><a href="https://plnkr.co/edit/G6I7m8duZMOCFdnuuk3l?p=preview" rel="nofollow">https://plnkr.co/edit/G6I7m8duZMOCFdnuuk3l?p=preview</a></p>
<p dir="auto">When a service bound to the root module is used by both the Resolve guard and the Component, the service is shared... However when the same logic is applied to the lazy loaded module, the service is created and recreated both when the Resolve Guard is instantiated and when the Component is instantiated respectively. The plunker above demos it. The logic for the retrieval of data in the root module and lazy loaded module is the same (different services/components ofcourse), however the creation of the service behave differently.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Only one instance of the Service 'provided' in the lazy loaded module should be created when accessed via the resolve guard, and a second creation (which overrides the first creation) SHOULD NOT take place when the Component is accessed.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<p dir="auto"><a href="https://plnkr.co/edit/G6I7m8duZMOCFdnuuk3l?p=preview" rel="nofollow">https://plnkr.co/edit/G6I7m8duZMOCFdnuuk3l?p=preview</a></p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<p dir="auto">Operating system: windows 10<br>
IDE: Webstorm<br>
Package manager: NPM<br>
HTTP server: Webpack dev server</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.4.2</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>
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>