<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>
If we use <code class="notranslate">providers</code> on the module, service <a href="https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#q-module-provider-visibility" rel="nofollow">become application level</a>. So, it is way to provide application-level services (as it made in <a href="https://embed.plnkr.co/?show=preview" rel="nofollow">example</a>).</p>
<p dir="auto">But, if we create lazy-loaded module it can import another modules, and import its providers as well. Due to lazy loaded modules get their own root scope, imported providers will override application root providers, and dublicate instances of the services will be created.</p>
<p dir="auto">So, if we using lazy-loaded modules, we should not use feature module providers at all - these services will be dublicated. We only can use providers of the AppModule. There is no use case, where feature module providers can be safely used.</p>
<p dir="auto"><a href="http://stackoverflow.com/questions/41925132/angular-where-to-provide-services" rel="nofollow">Additional info and documentation refs there</a>.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">Something should be fixed in the architecture, to create use case for feature module providers, or this feature should be deprecated. Documentation should describe, how to define application-level providers (in AppModule, and not in feature modules).</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X</li>
</ul>
<p dir="auto">in creating a options list that allows the user to change different settings i found a problem with the type checkbox . take this component</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="(function(app){
app.testing=ng.core.Component({
selector:&quot;testing&quot;,
template:&quot;&lt;input type='checkbox' [(ngModel)]='testing'/&gt;&quot;+
&quot;&lt;template ngFor #item [ngForOf]='list'&gt;&quot;+
&quot;&lt;input [type]='item.type' [(ngModel)]='item.value'/&gt;&quot;+
&quot;&lt;/template&gt;&quot;
}).Class({
constructor:[function(){
this.testing=true;
this.list=[
{type:&quot;checkbox&quot;,value:true},
{type:&quot;text&quot;,value:&quot;hello world&quot;}
];
}],
});
})(window.app||(window.app={}));"><pre class="notranslate"><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">app</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
<span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-c1">testing</span><span class="pl-c1">=</span><span class="pl-s1">ng</span><span class="pl-kos">.</span><span class="pl-c1">core</span><span class="pl-kos">.</span><span class="pl-en">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
<span class="pl-c1">selector</span>:<span class="pl-s">"testing"</span><span class="pl-kos">,</span>
<span class="pl-c1">template</span>:<span class="pl-s">"&lt;input type='checkbox' [(ngModel)]='testing'/&gt;"</span><span class="pl-c1">+</span>
<span class="pl-s">"&lt;template ngFor #item [ngForOf]='list'&gt;"</span><span class="pl-c1">+</span>
<span class="pl-s">"&lt;input [type]='item.type' [(ngModel)]='item.value'/&gt;"</span><span class="pl-c1">+</span>
<span class="pl-s">"&lt;/template&gt;"</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">Class</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
<span class="pl-c1">constructor</span>:<span class="pl-kos">[</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
<span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">testing</span><span class="pl-c1">=</span><span class="pl-c1">true</span><span class="pl-kos">;</span>
<span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">list</span><span class="pl-c1">=</span><span class="pl-kos">[</span>
<span class="pl-kos">{</span><span class="pl-c1">type</span>:<span class="pl-s">"checkbox"</span><span class="pl-kos">,</span><span class="pl-c1">value</span>:<span class="pl-c1">true</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">{</span><span class="pl-c1">type</span>:<span class="pl-s">"text"</span><span class="pl-kos">,</span><span class="pl-c1">value</span>:<span class="pl-s">"hello world"</span><span class="pl-kos">}</span>
<span class="pl-kos">]</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">app</span><span class="pl-c1">||</span><span class="pl-kos">(</span><span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">app</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">because of the ngFor loop combining with the dynamic setting of inputs and their types ngModel does not work on the second checkbox although it does on the first which is not dynamically set. im guessing this is a problem with how ngModel determines that the input is type checkbox. a example of this can be found <a href="https://jsfiddle.net/Lakntoyv/4/" rel="nofollow">here</a></p>
<p dir="auto">sorry to those of you who work in typescript i was not able to use typescript so it is in plain es5. i hope you can still interpret what its meaning and maybe someone can translate it to typescript.</p>