<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">Under certain conditions where module dependencies are listed in particular import orders, values that are provided with the multi flag (such as via a forChild syntax) will be duplicated when application boots.</p>
<p dir="auto">This behavior does not occur in angular 2.2.1 and was observed in 2.3.0 and 2.4.0.</p>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">Values provided within a module should not be duplicated if the module is referenced by several others.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<p dir="auto">I've narrowed down the situation when this occurs to this <a href="https://plnkr.co/edit/duzRz5STjl6kujmOulgo" rel="nofollow">plunker</a>. When run, you can see the list of provided values printed to the DOM. When the problem occurs, the string 'shared' will be printed twice.</p>
<p dir="auto">In this example there are 5 modules--AppModule, FeatureModule, FeatureWidgetModule, SharedModule, WidgetModule.</p>
<p dir="auto">The WidgetModule exposes a <code class="notranslate">forChild</code> method which simply provides string arguments as a multiple provider.</p>
<p dir="auto">The SharedModule imports <code class="notranslate">WidgetModule.forChild('shared')</code>.</p>
<p dir="auto">The FeatureModule follows a pattern often seen in Router documentation where there is a secondary module dedicated to importing the routes (or in this case widgets) for a feature. So, FeatureModule imports FeatureWidgetModule which imports <code class="notranslate">WidgetModule.forChild('feature')</code>.</p>
<p dir="auto">Finally, the AppModule imports both FeatureModule and SharedModule.</p>
<p dir="auto">When we use this setup, using the specific import order in the punker, the value <code class="notranslate">'shared'</code> that was multi-provided by the SharedModule appears twice when we inspect  all provided widgets.</p>
<p dir="auto">If you change the import order of the modules in the <a href="https://plnkr.co/edit/duzRz5STjl6kujmOulgo" rel="nofollow">plunker</a> you will see that 'shared' is only printed once.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">My use case is to allow various feature modules to provide their own values (such as route definitions) in a larger application with some shared modules referenced by several others. While i can work around the issue by manually manipulating the import orders, it requires that every module writer understand all the dependencies of the modules upon which they depend, which I believe should not be their concern.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<p dir="auto">Using OSX, WebStorm, npm,<br>
Able to reproduce using both SystemJS and Webpack</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.4.0</li>
</ul>
<p dir="auto">Problem occurs in angular 2.3.0 and 2.4.0.<br>
Does not occur in 2.2.1.</p>
<ul dir="auto">
<li><strong>Browser:</strong> [all]</li>
<li><strong>Language:</strong> [TypeScript 2.1.1]</li>
<li><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> = 6.9.1</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>
In the angular.io project we rely on a fake xhr implementation to simulate a web api in our samples.  The implementation can be found here: <a href="https://github.com/angular/in-memory-web-api/blob/master/src/in-memory-backend.service.ts#L120">https://github.com/angular/in-memory-web-api/blob/master/src/in-memory-backend.service.ts#L120</a></p>
<p dir="auto">To short circuit the injection of <code class="notranslate">XHRBackend</code>, we provide the fake backend like this:<br>
<code class="notranslate">{ provide: XHRBackend, useClass: InMemoryBackendService }</code></p>
<p dir="auto">This approach works well for JIT compiled samples, but for some reason this does not work when doing AOT compilation.</p>
<p dir="auto">The compile error I am seeing is:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Error: Error at /Users/tor/Helgevold-Consulting-Dev/angular.io/public/docs/_examples/toh-6/ts/app/app.module.ngfactory.ts:219:67: Supplied parameters do not match any signature of call target.
Error at /Users/tor/Helgevold-Consulting-Dev/angular.io/public/docs/_examples/toh-6/ts/app/app.module.ngfactory.ts:227:75: Argument of type 'InMemoryBackendService' is not assignable to parameter of type 'XHRBackend'.
  Property '_browserXHR' is missing in type 'InMemoryBackendService'."><pre class="notranslate"><code class="notranslate">Error: Error at /Users/tor/Helgevold-Consulting-Dev/angular.io/public/docs/_examples/toh-6/ts/app/app.module.ngfactory.ts:219:67: Supplied parameters do not match any signature of call target.
Error at /Users/tor/Helgevold-Consulting-Dev/angular.io/public/docs/_examples/toh-6/ts/app/app.module.ngfactory.ts:227:75: Argument of type 'InMemoryBackendService' is not assignable to parameter of type 'XHRBackend'.
  Property '_browserXHR' is missing in type 'InMemoryBackendService'.
</code></pre></div>
<p dir="auto">It complains that <code class="notranslate">_browserXHR</code> is not defined in the class.</p>
<p dir="auto">I tried defining <code class="notranslate">_browserXHR</code>, but that leads me to the new error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Argument of type 'InMemoryBackendService' is not assignable to parameter of type 'XHRBackend'.
  Types have separate declarations of a private property '_browserXHR'."><pre class="notranslate"><code class="notranslate">Argument of type 'InMemoryBackendService' is not assignable to parameter of type 'XHRBackend'.
  Types have separate declarations of a private property '_browserXHR'.
</code></pre></div>
<p dir="auto">I am not sure why this doesn't AOT compile. Why is it comparing internal (private) properties between the two implementations?</p>
<p dir="auto">Thanks!</p>