<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">When the application grows a certain point and component styles could not be shared in the same <code class="notranslate">&lt;style&gt;</code> tag, Angular creates a new style tag to host CSS definitions and attaches that to document head.</p>
<p dir="auto">There is a <a href="https://support.microsoft.com/en-us/help/262161/a-webpage-that-uses-css-styles-does-not-render-correctly-in-internet-explorer" rel="nofollow">limitation</a> in Internet Explorer 9 which prevents <code class="notranslate">&lt;style&gt;</code> tags after the first 31 are ignored by the browser. This limitation makes Angular applications "randomly" miss out the styles for components. I say random, because it seems style tags are created and appended to document head in component load order and user's navigation story throughout the app may have a significant effect on which styles will load and which ones will be ignored.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">Given the number of style tags allowed in Internet Explorer is very low, any sufficiently large application will hit this barrier very quickly. Because this limitation cannot be extended to a more reasonable limit, I think Angular should provide a way to put a hard limit on number of style tags to a level to keep support for this browser.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto">An application under test should have enough components to have the framework create more than 31 stylesheets. See <a href="https://plnkr.co/JeJ9uT" rel="nofollow">https://plnkr.co/JeJ9uT</a> for an example plunkr. On IE9, styles for component-29 and later are not applied (one style tag is inlined in index.html and one is created for root component, leaving 29 slots for generated components).</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">Most obvious workaround for this problem is to move all component styles out of a separate CSS file and leave the <code class="notranslate">styles</code> and <code class="notranslate">styleUrls</code> properties blank for component metadata. But this removes the encapsulation feature of the framework. Even then, this may not be suitable for all application configurations especially when they depend on third party component libraries such as material2 or ng-bootstrap.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">Environment irrelevant.</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.4.9</li>
</ul>

<ul dir="auto">
<li><strong>Browser:</strong> [IE 9]</li>
</ul>

<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> [all]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> = NA</p>
</li>
</ul>
<p dir="auto">Trying to inject <code class="notranslate">AsyncTestCompleter</code> into a <code class="notranslate">beforeEach</code> block results in an <code class="notranslate">InstantiationError</code>.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    beforeEach(inject([TestComponentBuilder, AsyncTestCompleter], (tcb, atc) =&gt; {
      builder = tcb;
      async = atc;
    }));"><pre class="notranslate">    <span class="pl-en">beforeEach</span><span class="pl-kos">(</span><span class="pl-en">inject</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-smi">TestComponentBuilder</span><span class="pl-kos">,</span> <span class="pl-smi">AsyncTestCompleter</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">tcb</span><span class="pl-kos">,</span> <span class="pl-s1">atc</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
      <span class="pl-s1">builder</span> <span class="pl-c1">=</span> <span class="pl-s1">tcb</span><span class="pl-kos">;</span>
      <span class="pl-s1">async</span> <span class="pl-c1">=</span> <span class="pl-s1">atc</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>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Error: Error during instantiation of AsyncTestCompleter!."><pre class="notranslate"><code class="notranslate">Error: Error during instantiation of AsyncTestCompleter!.
</code></pre></div>
<p dir="auto">It would allow tests to be significantly cleaner by supporting this, as it would prevent a lot of duplication in writing each test (<code class="notranslate">inject</code>ing <code class="notranslate">AsyncTestCompleter</code> into each <code class="notranslate">it</code>).</p>