<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>
Expressions testing for strict (in)equality with <code class="notranslate">undefined</code> evaluate incorrectly, e.g.:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{{ undefinedVariable === undefined }}"><pre class="notranslate"><code class="notranslate">{{ undefinedVariable === undefined }}
</code></pre></div>
<p dir="auto">^ "false" output to DOM</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;p *ngIf=&quot;undefinedVariable !== undefined&quot;&gt;Should not display&lt;/p&gt;"><pre class="notranslate"><code class="notranslate">&lt;p *ngIf="undefinedVariable !== undefined"&gt;Should not display&lt;/p&gt;
</code></pre></div>
<p dir="auto">^ "Should not display" output to DOM</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Expressions testing for strict (in)equality with <code class="notranslate">undefined</code> evaluate correctly</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
<a href="http://plnkr.co/edit/SdxObL" rel="nofollow">http://plnkr.co/edit/SdxObL</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto"><strong>Please tell us about your environment:</strong></p>

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

</li>
<li>
<p dir="auto"><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 ]</p>

</li>
<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>
<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 =&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">Here is the code I have for a component:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
    selector: 'myComponent',
    templateUrl: 'mycomponent.component.html',
    styles: [`
        chart {
            display: block;
        }
    `],
    styleUrls: ['mycomponent.component.scss'],
})"><pre class="notranslate">@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'myComponent'</span><span class="pl-kos">,</span>
    <span class="pl-c1">templateUrl</span>: <span class="pl-s">'mycomponent.component.html'</span><span class="pl-kos">,</span>
    <span class="pl-c1">styles</span>: <span class="pl-kos">[</span><span class="pl-s">`</span>
<span class="pl-s">        chart {</span>
<span class="pl-s">            display: block;</span>
<span class="pl-s">        }</span>
<span class="pl-s">    `</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">styleUrls</span>: <span class="pl-kos">[</span><span class="pl-s">'mycomponent.component.scss'</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">And here is the Typescript error I have:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="ERROR in [default] /Users/max/Documents/workspace/admin/src/app/spots/spots-debug-graph.component.ts:19:4 
An object literal cannot have multiple properties with the same name in strict mode.

ERROR in [default] /Users/max/Documents/workspace/admin/src/app/spots/spots-debug-graph.component.ts:19:4 
Duplicate identifier 'styles'."><pre class="notranslate"><code class="notranslate">ERROR in [default] /Users/max/Documents/workspace/admin/src/app/spots/spots-debug-graph.component.ts:19:4 
An object literal cannot have multiple properties with the same name in strict mode.

ERROR in [default] /Users/max/Documents/workspace/admin/src/app/spots/spots-debug-graph.component.ts:19:4 
Duplicate identifier 'styles'.
</code></pre></div>
<p dir="auto">If I remove one of the two <code class="notranslate">styles</code>or <code class="notranslate">styleUrls</code>declarations I have no error.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
There should be no error as in the typing definition of the <code class="notranslate">Component</code>decorator there is those two attributes.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
I don't seem to be able to create a plunkr to reproduct this error.<br>
Maybe because I'm using angular-cli to build my project, so with Webpack and not SystemJs.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
I need to change the style of the chart block to make it take all the place of its parent container.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">OS X El Captain 10.11.6<br>
angular-cli: 1.0.0-beta.15<br>
node: 6.1.0<br>
os: darwin x64</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.X<br>
Last version, Angular 2.0.0.</li>
<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 ]<br>
I just checked in Chrome but I don't think this is related to the browser as I have the error in the CLI when using <code class="notranslate">ng serve</code>.</li>
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
Typescript 2.0.2</li>
<li><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =  6.1.0</li>
</ul>