Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
Ask Question
I am upgrading my angular 2 app from beta 9 to RC5 and i get this error in my form template.
Here is the full error
zone.js:461 Unhandled Promise rejection: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
</section>
[ERROR ->]"): ParametersFormComponent@186:0
Invalid ICU message. Missing '}'. ("arr">
<p>{{ pa }}</p>
<button class="destroy" type="button" (click)="deleteItem(pa, [ERROR ->]'param')"></button>
"): ParametersFormComponent@158:70
Unexpected closing tag "button" (" <p>{{ pa }}</p>
<button class="destroy" type="button" (click)="deleteItem(pa, 'param')">[ERROR ->]</button>
"): ParametersFormComponent@158:80
Unexpected closing tag "li" ("/p>
<button class="destroy" type="button" (click)="deleteItem(pa, 'param')"></button>
[ERROR ->]</li>
<pre>{ Restrict Operator } parameters</pre>
"): ParametersFormComponent@159:6
Invalid ICU message. Missing '}'. ("arr">
<p>{{ la }}</p>
<button class="destroy" type="button" (click)="deleteItem(la, [ERROR ->]'liftOperator')"></button>
"): ParametersFormComponent@170:70
Unexpected closing tag "button" ("{{ la }}</p>
<button class="destroy" type="button" (click)="deleteItem(la, 'liftOperator')">[ERROR ->]</button>
"): ParametersFormComponent@170:87
Unexpected closing tag "li" (" <button class="destroy" type="button" (click)="deleteItem(la, 'liftOperator')"></button>
[ERROR ->]</li>
<pre>{ xInitial } parameters</pre>
"): ParametersFormComponent@171:6
Invalid ICU message. Missing '}'. ("
</section>
[ERROR ->]"): ParametersFormComponent@186:0 ; Zone: <root> ; Task: Promise.then ; Value: BaseException {message: "Template parse errors:↵Unexpected character "EOF" …tion>↵[ERROR ->]"): ParametersFormComponent@186:0", stack: "Error: Template parse errors:↵Unexpected character…ttp://localhost:4200/polyfills.bundle.js:3385:38)"}message: "Template parse errors:↵Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("↵ </div>↵ </div>↵</section>↵[ERROR ->]"): ParametersFormComponent@186:0↵Invalid ICU message. Missing '}'. ("arr">↵ <p>{{ pa }}</p>↵ <button class="destroy" type="button" (click)="deleteItem(pa, [ERROR ->]'param')"></button>↵ </li>↵↵"): ParametersFormComponent@158:70↵Unexpected closing tag "button" (" <p>{{ pa }}</p>↵ <button class="destroy" type="button" (click)="deleteItem(pa, 'param')">[ERROR ->]</button>↵ </li>↵↵"): ParametersFormComponent@158:80↵Unexpected closing tag "li" ("/p>↵ <button class="destroy" type="button" (click)="deleteItem(pa, 'param')"></button>↵ [ERROR ->]</li>↵↵ <pre>{ Restrict Operator } parameters</pre>↵"): ParametersFormComponent@159:6↵Invalid ICU message. Missing '}'. ("arr">↵ <p>{{ la }}</p>↵ <button class="destroy" type="button" (click)="deleteItem(la, [ERROR ->]'liftOperator')"></button>↵ </li>↵↵"): ParametersFormComponent@170:70↵Unexpected closing tag "button" ("{{ la }}</p>↵ <button class="destroy" type="button" (click)="deleteItem(la, 'liftOperator')">[ERROR ->]</button>↵ </li>↵↵"): ParametersFormComponent@170:87↵Unexpected closing tag "li" (" <button class="destroy" type="button" (click)="deleteItem(la, 'liftOperator')"></button>↵ [ERROR ->]</li>↵↵ <pre>{ xInitial } parameters</pre>↵"): ParametersFormComponent@171:6↵Invalid ICU message. Missing '}'. ("↵ </div>↵ </div>↵</section>↵[ERROR ->]"): ParametersFormComponent@186:0"stack: "Error: Template parse errors:↵Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("↵ </div>↵ </div>↵</section>↵[ERROR ->]"): ParametersFormComponent@186:0↵Invalid ICU message. Missing '}'. ("arr">↵ <p>{{ pa }}</p>↵ <button class="destroy" type="button" (click)="deleteItem(pa, [ERROR ->]'param')"></button>↵ </li>↵↵"): ParametersFormComponent@158:70↵Unexpected closing tag "button" (" <p>{{ pa }}</p>↵ <button class="destroy" type="button" (click)="deleteItem(pa, 'param')">[ERROR ->]</button>↵ </li>↵↵"): ParametersFormComponent@158:80↵Unexpected closing tag "li" ("/p>↵ <button class="destroy" type="button" (click)="deleteItem(pa, 'param')"></button>↵ [ERROR ->]</li>↵↵ <pre>{ Restrict Operator } parameters</pre>↵"): ParametersFormComponent@159:6↵Invalid ICU message. Missing '}'. ("arr">↵ <p>{{ la }}</p>↵ <button class="destroy" type="button" (click)="deleteItem(la, [ERROR ->]'liftOperator')"></button>↵ </li>↵↵"): ParametersFormComponent@170:70↵Unexpected closing tag "button" ("{{ la }}</p>↵ <button class="destroy" type="button" (click)="deleteItem(la, 'liftOperator')">[ERROR ->]</button>↵ </li>↵↵"): ParametersFormComponent@170:87↵Unexpected closing tag "li" (" <button class="destroy" type="button" (click)="deleteItem(la, 'liftOperator')"></button>↵ [ERROR ->]</li>↵↵ <pre>{ xInitial } parameters</pre>↵"): ParametersFormComponent@171:6↵Invalid ICU message. Missing '}'. ("↵ </div>↵ </div>↵</section>↵[ERROR ->]"): ParametersFormComponent@186:0↵ at new BaseException (http://localhost:4200/main.bundle.js:3322:23)↵ at TemplateParser.parse (http://localhost:4200/main.bundle.js:14533:19)↵ at RuntimeCompiler._compileTemplate (http://localhost:4200/main.bundle.js:32136:51)↵ at http://localhost:4200/main.bundle.js:32064:83↵ at Set.forEach (native)↵ at compile (http://localhost:4200/main.bundle.js:32064:47)↵ at ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:3352:29)↵ at Zone.run (http://localhost:4200/polyfills.bundle.js:3245:44)↵ at http://localhost:4200/polyfills.bundle.js:3600:58↵ at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:3385:38)"__proto__: ErrorconsoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494
and the html file
<section class="container-fluid">
<div class="col-sm-8">
<h1>Parameters Form</h1>
<form [ngFormModel]="myForm" (ngSubmit)="onSubmit(myForm.value)" class="parameters-form">
<fieldset>
<div class="form-inline">
<div class="form-group">
<label for="numberOfModelParameters">Number of Model Parameters(n)</label>
<input type="number" #n
id="numberOfModelParameters"
class="form-control"
placeholder="numberOfModelParameters Param"
[ngFormControl]="myForm.controls['numberOfModelParameters']">
<div class="form-group">
<label for="numberOfModelVariables">Number of Model Variables(m)</label>
<input type="number" #m
id="numberOfModelVariables"
class="form-control"
placeholder="numberOfModelVariables Param"
[ngFormControl]="myForm.controls['numberOfModelVariables']">
<div class="form-inline">
<div class="form-group">
<label for="systemParameters">System Parameters</label>
<input type="text"
id="systemParameters"
class="form-control"
placeholder="systemParameters Param"
[ngFormControl]="systemParameters"
(keypress)="addToArray($event, systemParameters.value, 'systemParameters')">
<div class="form-group">
<label for="restrictOperator">Restrict Operator</label>
<input type="text"
id="restrictOperator"
class="form-control"
placeholder="restrictOperator Param"
[ngFormControl]="myForm.controls['restrictOperator']"
(keypress)="addToArray($event, restrictOperator.value, 'restrictOperator')">
<div class="form-inline">
<div class="form-group">
<label for="param">Param</label>
<input type="number"
id="param"
class="form-control"
placeholder="param"
[ngFormControl]="myForm.controls['param']"
(keypress)="addToArray($event, param.value, 'param')">
<div class="form-group">
<label for="liftOperator">Lift Operator</label>
<input type="text"
id="liftOperator"
class="form-control"
placeholder="liftOperator Param"
[ngFormControl]="myForm.controls['liftOperator']"
(keypress)="addToArray($event, liftOperator.value, 'liftOperator')">
<div class="form-inline">
<div class="form-group">
<label for="netLogoFile">Net Logo File</label>
<input type="text"
id="netLogoFile"
class="form-control"
placeholder="netLogoFile Param"
[ngFormControl]="myForm.controls['netLogoFile']">
<div class="form-group">
<label for="xInitial">xInitial</label>
<input type="number"
id="xInitial"
class="form-control"
placeholder="xInitial Param"
[ngFormControl]="myForm.controls['xInitial']"
(keypress)="addToArray($event, xInitial.value, 'xInitial')">
</fieldset>
<fieldset>
<div class="form-inline">
<div class="form-group">
<label for="realisations">Realisations</label>
<input type="number"
id="realisations"
class="form-control"
placeholder="Realisations Param"
[ngFormControl]="myForm.controls['realisations']">
<div class="form-group">
<label for="NumConstSteps">Number of Constant Steps</label>
<input type="number"
id="NumConstSteps"
class="form-control"
placeholder="NumConstSteps Param"
[ngFormControl]="myForm.controls['numConstSteps']">
<div class="form-group">
<label for="timeHorizon">Time Horizon</label>
<input type="number"
id="timeHorizon"
class="form-control"
placeholder="timeHorizon Param"
[ngFormControl]="myForm.controls['timeHorizon']">
<div class="form-group">
<label for="continuationStep">Continuation Step</label>
<input type="number"
id="continuationStep"
class="form-control"
placeholder="continuationStep Param"
[ngFormControl]="myForm.controls['continuationStep']">
<div class="form-group">
<label for="continuationStepSign">Continuation Step Sign (+,-)</label>
<input type="text"
id="continuationStepSign"
class="form-control"
placeholder="continuationStep sign"
[ngFormControl]="myForm.controls['continuationStepSign']">
</fieldset>
<button [disabled]="!isFullfilled(m.value, n.value) || !myForm.valid" type="submit" class="btn btn-success">Submit</button>
<!-- <button type="submit" class="btn btn-success">Submit</button> -->
</form>
<div class="col-sm-4">
<div class="parameter-values-display" *ngIf="system_arr.length != 0 || param_arr.length != 0 || restrict_arr.length != 0 || lift_arr.length != 0 || xinitial_arr.length != 0">
<pre>{ System } parameters</pre>
<li class="parameters" *ngFor="#sa of system_arr">
<p>{{ sa }}</p>
<button class="destroy" type="button" (click)="deleteItem(sa, 'systemParameters')"></button>
<pre>{ Param } Parameters</pre>
<li class="parameters" *ngFor="#pa of param_arr">
<p>{{ pa }}</p>
<button class="destroy" type="button" (click)="deleteItem(pa, 'param')"></button>
<pre>{ Restrict Operator } parameters</pre>
<li class="parameters" *ngFor="#ra of restrict_arr">
<p>{{ ra }}</p>
<button class="destroy" type="button" (click)="deleteItem(ra, 'restrictOperator')"></button>
<pre>{ Lift Operator } parameters</pre>
<li class="parameters" *ngFor="#la of lift_arr">
<p>{{ la }}</p>
<button class="destroy" type="button" (click)="deleteItem(la, 'liftOperator')"></button>
<pre>{ xInitial } parameters</pre>
<li class="parameters" *ngFor="#xa of xinitial_arr">
<p>{{ xa }}</p>
<button class="destroy" type="button" (click)="deleteItem(xa, 'xInitial')"></button>
<div class="response-wrapper">
<label>Response</label>
<pre><span>{{ response | json }}</span></pre>
</section>
this was working fine in beta i haven't changed anything since. Any insight?
–
–
–
–
–
Happened to me too.
In my case, I noticed that I had a non-closed <textarea> tag, like so:
(using angular material)
<textarea mat-input [(ngModel)]="todoItem.content" name="content">
When closing the tag like so:
<textarea mat-input [(ngModel)]="todoItem.content" name="content"></textarea>
the issue was solved.
I hope it helps.
–
Please make sure to close all open tags.
I had a similar issue but it was mainly because a skipped one closing tag.
pay close attention to form input and provide closing tags where necessary
I've been having this error a lot, whilst writing technical articles, describing JSON and Angular.
My solution was to replace any { characters with { and to wrap the entire code section with ngNonBindable :
<pre ngNonBindable>
{
"GetUsersCount": 13
This makes the { characters appear correctly on the webpage, and prevents Angular from trying to bind to the characters in my example code.
It happened for me because I mistakenly place template file url in styleUrls place and scss file url in template file place. it might help you do debug the error quickly.
wrong
@Component({
selector: 'sd-select',
templateUrl: './select.component.scss',
styleUrls: ['./select.component.html'],
providers: [SELECT_VALUE_ACCESSOR],
encapsulation: ViewEncapsulation.None
correct
@Component({
selector: 'sd-select',
templateUrl: './select.component.html',
styleUrls: ['./select.component.scss'],
providers: [SELECT_VALUE_ACCESSOR],
encapsulation: ViewEncapsulation.None
This can happen when you forget to add the file extension in the name of the template file your component is linked to.
Such as writing:
@Component({
selector: 'hi-stackoverflow',
templateUrl: 'hi-stackoverflow.component'
instead of:
@Component({
selector: 'hi-stackoverflow',
templateUrl: 'hi-stackoverflow.component.html'
This is the top answer for the error:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}")
In my case my markup mistake was different than OP's
My a element was not separated by my [routerLink] attribute , and so the curly brackets used for my Angular2 expression, were not interepreted as an object
<a[routerLink]="['.', {
mode: 'edit',
tab: 'process'
So in my case, the true solution is to add a space after a:
<a [routerLink]="['.', {
mode: 'edit',
tab: 'process'
Another non-ideal solution (if you just need to show curly brackets to the user) is to let CSS render the brackets.
Instead of
<pre>{ System } parameters</pre>
.brackets:before{
content: '{ '
.brackets:after{
content: ' }'
<span class="brackets">System</span>
parameters
</span>
I am also facing the same error while merge code in bitbucket.
But, my mistake here is " added one extra in HTML.
<div class="col-sm-6 col-md-6 col-lg-3 mobile-margin-top-15" "
Above is the issue in my code. for your reference.
It happened with me when I used comments in Template.
I'll suggest you guys, remove one by one line from your template to check which Line is giving you Error.
The line which was giving Error in my case is:
{% comment %} <p>{{ pName | uppercase }}</p> {% endcomment %}
There is one easier solution that does not require escape characters or two many workarounds and actually works nice, just use angular functionality
The basic idea is that you can assign the code as a literal template, and then just print it inside the pre tag.
On the component:
this.cssString = `.ui-table table {
border-collapse:collapse;
width: 100%;
table-layout: fixed;
this.htmlString = `<pre>
<code class="language-html" pCode>
{{htmlString}}
</code>
</pre>`;
On the template
<code class="language-css" pCode>
{{cssString}}
</code>
<code class="language-css" pCode>
{{htmlString}}
</code>
Will render
NOTE: pCode is a helper tag from ngPrime to print code, so don't pay to much attention to it.
In my case, I have an incorrect URL for my template.
@Component({
templateUrl: './my-template.component'
@Component({
templateUrl: './my-template.component.html'
