<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
[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
[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><br>
Due to script tags being stripped from component templates, there is no way to implement JSON-LD tags.<br>
Further discussion on this topic can be found <a href="http://stackoverflow.com/questions/38088996/adding-script-tags-in-angular2-component-template" rel="nofollow">here</a> and <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="91831807" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/2766" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/2766/hovercard" href="https://github.com/angular/angular/issues/2766">#2766</a></p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
Using angular-universal and on sites implementing pure client side rendering, there needs to be a way for users of angular2 to implement JSON-LD tags for SEO purposes. At the moment this is not possible.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Google recommend JSON-LD for structured data. The alternative of using micro data is also not a very good idea as this data would be disseminated throughout the templates of many, if not all components.</p>
<h2 dir="auto">I'm submitting a...</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
[x] Bug report  
[x] Feature request"><pre class="notranslate"><code class="notranslate">
[x] Bug report  
[x] Feature request
</code></pre></div>
<h2 dir="auto">Background</h2>
<p dir="auto">Imagine you have the following webcomponent:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;expression&gt;
	&lt;script type='text/plain'&gt;
		If(var1 &lt; var2,
			Sum([Field 1])
		,
			Sum([Field 2])
		)
	&lt;/script&gt;
&lt;/expression&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">expression</span><span class="pl-kos">&gt;</span>
	<span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">type</span>='<span class="pl-s">text/plain</span>'<span class="pl-kos">&gt;</span>
		<span class="pl-v">If</span><span class="pl-kos">(</span><span class="pl-s1">var1</span> <span class="pl-c1">&lt;</span> <span class="pl-s1">var2</span><span class="pl-kos">,</span>
			<span class="pl-v">Sum</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-v">Field</span> <span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">)</span>
		<span class="pl-kos">,</span>
			<span class="pl-v">Sum</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-v">Field</span> <span class="pl-c1">2</span><span class="pl-kos">]</span><span class="pl-kos">)</span>
		<span class="pl-kos">)</span>
	<span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">expression</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">The component reads the text inside the script tag and sends it to a server which evaluates the result.</p>
<p dir="auto">The webcomponent should be embedded in an Angular App. It is no Angular component and should just rendered as is.</p>
<p dir="auto">It has to contain a script tag because <code class="notranslate">'text/plain'</code> allows it not to be parsed as HTML and like this, it is possible for expressions to contain characters like <code class="notranslate">&lt;</code> as in <code class="notranslate">var1 &lt; var2</code> without being recognized as the beginning of a html tag.</p>
<h2 dir="auto">Current behavior</h2>
<p dir="auto">Angular deletes all script tags inside templates, also those with text/plain. I read, that this is because you shouldn't mix JavaScript with Angular Templates, but this is just plain text.</p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto"><code class="notranslate">&lt;script type="text/plain"</code> should not be deleted. It is the only way to integrate text without having to escape all html characters.</p>
<h2 dir="auto">Minimal reproduction of the problem with instructions</h2>
<p dir="auto">Insert the following code into a template and see if it will be deleted.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;script type='text/plain'&gt;
    If(var1 &lt; var2,
        Sum([Field 1])
    ,
        Sum([Field 2])
    )
&lt;/script&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">type</span>='<span class="pl-s">text/plain</span>'<span class="pl-kos">&gt;</span>
    <span class="pl-v">If</span><span class="pl-kos">(</span><span class="pl-s1">var1</span> <span class="pl-c1">&lt;</span> <span class="pl-s1">var2</span><span class="pl-kos">,</span>
        <span class="pl-v">Sum</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-v">Field</span> <span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">)</span>
    <span class="pl-kos">,</span>
        <span class="pl-v">Sum</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-v">Field</span> <span class="pl-c1">2</span><span class="pl-kos">]</span><span class="pl-kos">)</span>
    <span class="pl-kos">)</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span></pre></div>
<h2 dir="auto">What is the motivation / use case for changing the behavior?</h2>
<p dir="auto">If <code class="notranslate">&lt;script type="text/plain"</code> would not be deleted it is possible to insert everything which is not html without having to escape it. HTML 5 supports it and as far as I know there is no alternative. Also it isn't a security vulnerability.</p>
<h2 dir="auto">Environment</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
Angular version: 6.1.0
Browser:
- [x] Chrome (desktop) version 69"><pre class="notranslate"><code class="notranslate">
Angular version: 6.1.0
Browser:
- [x] Chrome (desktop) version 69
</code></pre></div>