Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)

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.) ("
    </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 ; 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>
          <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>
        </div>

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

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

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

          <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')">
          </div>
        </div>
      </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>

        </div>


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

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

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

        <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']">
        </div>

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

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

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

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

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

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

      <div class="response-wrapper">
        <label>Response</label>
        <pre><span>{{ response | json }}</span></pre>
      </div>
    </div>
  </div>
</section>

this was working fine in beta i haven't changed anything since. Any insight?

Answer 1

I think as it is mention in the error that you posted above

Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.

you have to use it like this

 <pre>{{ '{' }} System {{'}'}}

instead of

<pre>{ System } parameters</pre>

Answer 2

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.

Answer 3

Not that clean solution we're all looking for, but HTML codes are an alternative:

Breaks:

  { foo }

Works fine:

  { foo }

Answer 4

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