<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")<br>
[x] bug report</p>
<p dir="auto"><strong>Current behavior</strong></p>
<ul dir="auto">
<li><strong>I'm submitting a ...</strong></li>
</ul>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> bug report</li>
</ul>
<ul dir="auto">
<li><strong>What modules are related to this Issue?</strong></li>
</ul>
<ul dir="auto">
<li>[X universal</li>
</ul>
<ul dir="auto">
<li><strong>What is the current behavior?</strong></li>
</ul>
<p dir="auto">Unable to server-render "code" placed in the <code class="notranslate">template</code> as the parser isn't sure how to handle it.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// adding this to a template causes the error
&lt;code&gt;
    constructor () {}
&lt;/code&gt;"><pre class="notranslate"><code class="notranslate">// adding this to a template causes the error
&lt;code&gt;
    constructor () {}
&lt;/code&gt;
</code></pre></div>
<p dir="auto"><strong>Error outputed:</strong></p>
<blockquote>
<p dir="auto">zone.js:388 Unhandled Promise rejection: Template parse errors:<br>
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("<br>
<br>
<br>
[ERROR -&gt;]"): App@7:2<br>
Invalid ICU message. Missing '}'. ("<br>
<br>
<br>
[ERROR -&gt;]"): App@7:2 ; Zone:  ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:<br>
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("<br>
<br>
<br>
[ERROR -&gt;]"): App@7:2<br>
Invalid ICU message. Missing '}'. ("<br>
<br>
<br>
[ERROR -&gt;]"): App@7:2<br>
at TemplateParser.parse (<a href="https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:7728:21" rel="nofollow">https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:7728:21</a>)<br>
at RuntimeCompiler._compileTemplate (<a href="https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:17503:53" rel="nofollow">https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:17503:53</a>)<br>
at eval (<a href="https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:17423:64" rel="nofollow">https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:17423:64</a>)<br>
at Set.forEach (native)<br>
at RuntimeCompiler._compileComponents (<a href="https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:17423:21" rel="nofollow">https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:17423:21</a>)<br>
at createResult (<a href="https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:17319:21" rel="nofollow">https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:17319:21</a>)<br>
at ZoneDelegate.invoke (<a href="https://unpkg.com/zone.js@0.6.26/dist/zone.js:232:26" rel="nofollow">https://unpkg.com/zone.js@0.6.26/dist/zone.js:232:26</a>)<br>
at Zone.run (<a href="https://unpkg.com/zone.js@0.6.26/dist/zone.js:114:43" rel="nofollow">https://unpkg.com/zone.js@0.6.26/dist/zone.js:114:43</a>)<br>
at <a href="https://unpkg.com/zone.js@0.6.26/dist/zone.js:502:57" rel="nofollow">https://unpkg.com/zone.js@0.6.26/dist/zone.js:502:57</a><br>
at ZoneDelegate.invokeTask (<a href="https://unpkg.com/zone.js@0.6.26/dist/zone.js:265:35" rel="nofollow">https://unpkg.com/zone.js@0.6.26/dist/zone.js:265:35</a>)</p>
</blockquote>
<p dir="auto"><strong>Expected behavior</strong><br>
Being able to drop regular code into <code class="notranslate">&lt;pre&gt; | &lt;code&gt;</code> tags, without having to do any special preparation of code so the template parser can handle it.<br>
(I'm not positive if this is possible)</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<strong>Plunkr demo</strong> :<br>
<a href="http://plnkr.co/edit/MdEDMLEVAmGYeywaKchN?p=preview" rel="nofollow">http://plnkr.co/edit/MdEDMLEVAmGYeywaKchN?p=preview</a></p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Any OS</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
Happens with latest: <strong>2.2.0</strong> as well</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [all]</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> TypeScript 2.*</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>
<code class="notranslate">&lt;div&gt;Test binding: {{2 + 2}}&lt;/div&gt;</code><br>
=&gt; <code class="notranslate">Test binding: 4</code><br>
<code class="notranslate">&lt;div ngNonBindable&gt;Test non binding: {{2 + 2}}&lt;/div&gt;</code><br>
=&gt; <code class="notranslate">Test binding: {{2 + 2}}</code><br>
<code class="notranslate">&lt;div&gt;Test  non binding: {2 + 2}&lt;/div&gt;</code><br>
=&gt; Template parse errors, the "(Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)" message.</p>
<p dir="auto">This is a problem because precisely due to the fact that they are [ngNonBindable] marked elements, <code class="notranslate">"{{ '{' }}"</code> doesn't produce the expected result.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
As the escaping of <code class="notranslate">{</code> characters isn't possible inside [ngNonBindable] elements so it's the compiler's job to ignore them altogether, I believe.</p>
<p dir="auto"><code class="notranslate">&lt;div&gt;Test  non binding: {2 + 2}&lt;/div&gt;</code><br>
=&gt; <code class="notranslate">Test binding: {2 + 2}</code></p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
here =&gt; <a href="http://plnkr.co/edit/GSzwEUyXyY1qDabjpEL1?p=preview" rel="nofollow">http://plnkr.co/edit/GSzwEUyXyY1qDabjpEL1?p=preview</a></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0</li>
</ul>