<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
[ ] feature request
[ ] support request"><pre class="notranslate"><code class="notranslate">[X] bug report
[ ] feature request
[ ] support request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
When using AoT compilation, in particular with the <code class="notranslate">@ngtools/webpack</code> plugin, using <code class="notranslate">ViewEncapsulation.None</code> in a component with stylesheets, an error is raised at runtime, since component styles are <em>always</em> accessed through the <em>styles</em> exported member, but this only exists when <code class="notranslate">ViewEncapsulation</code> is set to <code class="notranslate">Emulated</code>. Because of that, the <code class="notranslate">_flattenStyles</code> function received an array with <code class="notranslate">undefined</code> items, and tries to run the <code class="notranslate">replace</code> method over it.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Regardless of which <code class="notranslate">ViewEncapsulation</code> is used, compiled styles imports should not break at runtime.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<ol dir="auto">
<li>Clone and setup <a href="https://github.com/blacksonic/angular2-aot-webpack/">https://github.com/blacksonic/angular2-aot-webpack/</a></li>
<li>Delete <em>ngfactory</em> folder and files</li>
<li>Add <code class="notranslate">ViewEncapsulation.None</code> to home.component.s</li>
<li>Run</li>
</ol>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
You can take a look at the <code class="notranslate">style_compiler </code>source code: <a href="https://github.com/angular/angular/blob/master/modules/%40angular/compiler/src/style_compiler.ts#L60">https://github.com/angular/angular/blob/master/modules/%40angular/compiler/src/style_compiler.ts#L60</a>. When in a <em>component</em> context, a variable named <em>styles</em> is used to get the exported value. However, that variable only exists when a <em>shim</em> is used, but only happens when <code class="notranslate">ViewEncapsulation</code> is <code class="notranslate">Emulated</code>.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Windows 10 build 1607</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.1.2</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> all</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> TypeScript 2.0.7</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =   6.9.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>
Root component (that is bootstrapped) does not get any content transcluded with <code class="notranslate">ng-content</code>.</p>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<p dir="auto">There should be a possibility to transclude root component's content into component's view.</p>
<p dir="auto"><strong>Reproduction of the problem</strong></p>
<p dir="auto">Plunker: <a href="https://plnkr.co/edit/WozwzyMhajp6mIHoKcZA?p=preview" rel="nofollow">https://plnkr.co/edit/WozwzyMhajp6mIHoKcZA?p=preview</a><br>
Observed: <code class="notranslate">Component content:</code></p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
<code class="notranslate">Component content: loading...</code></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">There should be a consistent behaviour on <code class="notranslate">ng-content</code> no matter is it root component or any other that is used in view component.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.6</li>
<li><strong>Browser:</strong> [all]</li>
<li><strong>Language:</strong> [all]</li>
</ul>