<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">Compiling using <code class="notranslate">ngc</code> and with <code class="notranslate">flatModuleOutFile</code> produces a <code class="notranslate">*.metadata.json</code> file with flattened html/css paths.</p>
<p dir="auto">Example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// ...
&quot;arguments&quot;: [
  {
    &quot;selector&quot;: &quot;my-lib&quot;,
    &quot;templateUrl&quot;: &quot;./lib.component.html&quot;,
    &quot;styleUrls&quot;: [
      &quot;./lib.component.css&quot;
    ]
  }
]
// ..."><pre class="notranslate"><code class="notranslate">// ...
"arguments": [
  {
    "selector": "my-lib",
    "templateUrl": "./lib.component.html",
    "styleUrls": [
      "./lib.component.css"
    ]
  }
]
// ...
</code></pre></div>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">Paths to html/css should be resolved to the original path. Notice <code class="notranslate">./lib/...</code>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// ...
&quot;arguments&quot;: [
  {
    &quot;selector&quot;: &quot;my-lib&quot;,
    &quot;templateUrl&quot;: &quot;./lib/lib.component.html&quot;,
    &quot;styleUrls&quot;: [
      &quot;./lib/lib.component.css&quot;
    ]
  }
]
// ..."><pre class="notranslate"><code class="notranslate">// ...
"arguments": [
  {
    "selector": "my-lib",
    "templateUrl": "./lib/lib.component.html",
    "styleUrls": [
      "./lib/lib.component.css"
    ]
  }
]
// ...
</code></pre></div>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="git clone https://github.com/filipesilva/ngc-flatmodule-windows
cd ngc-flatmodule-windows
npm run build"><pre class="notranslate"><code class="notranslate">git clone https://github.com/filipesilva/ngc-flatmodule-windows
cd ngc-flatmodule-windows
npm run build
</code></pre></div>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">Library authors should not have to copy all html/css to the root <code class="notranslate">typings/</code> folder instead of maintaining the library structure.</p>
<p dir="auto">Flattening the html/css paths to root also forces library authors to avoid duplicate html/css filenames.<br>
<strong>Please tell us about your environment:</strong></p>

<p dir="auto">Windows 10, VS Code, npm@4.0.5, node@7.4.0, typescript@2.2.1</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 4.0.0-rc.3</li>
</ul>

<ul dir="auto">
<li><strong>Browser:</strong> [ N/A ]</li>
</ul>

<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> [ TypeScript 2.2 ]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =  7.4.0</p>
</li>
</ul>
<p dir="auto">/cc <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/chuckjaz/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/chuckjaz">@chuckjaz</a></p>
<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="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[ x ] 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">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[ x ] 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">Interpolations are ignored in &lt;style&gt; block.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">Support interpolations in &lt;style&gt; block.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto"><a href="https://plnkr.co/edit/pA0FcxdV6VEaupsTFe2V" rel="nofollow">https://plnkr.co/edit/pA0FcxdV6VEaupsTFe2V</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">If I know only css-class name of element - I can't change its styles dynamicaly</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<ul dir="auto">
<li><strong>Angular version:</strong> 2.2.X</li>
</ul>

<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>

<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</p>
</li>
</ul>