Javascript 角2和小枝

我试图在angular 2组件中使用twig变量和语法，但每次都会出错

这是我的角度分量：

import { Component } from '@angular/core';

@Component({
    selector: 'signin-component',
    templateUrl: 'app/signin.component.html'
})

export class SignInComponent { }

这是组件HTML

<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="panel panel-default">
            <div class="panel-heading">Sign in</div>
            <div class="panel-body">
                <form class="" action="/public/auth/signin" method="post" autocomplete="off">
                    <div class="form-group{{ errors.email ? ' has-error' : '' }}">
                        <label for="email">Email</label>
                        <input class="form-control" type="email" name="email" id="email" value={{ old.email }}>
                        {% if errors.email %}
                            <span class="help-block">{{ errors.email | first }}</span>
                        {% endif %}
                    </div>
                    <div class="form-group{{ errors.password ? ' has-error' : '' }}">
                        <label for="password">Password</label>
                        <input class="form-control" type="password" name="password" id="password">
                        {% if errors.password %}
                            <span class="help-block">{{ errors.password | first }}</span>
                        {% endif %}
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">Sign in</button>
                        {{ csrf.field | raw }}
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

登录
电子邮件
{%if errors.email%}
{{errors.email | first}}
{%endif%}
密码
{%if errors.password%}
{{errors.password | first}}
{%endif%}
登录
{{csrf.field | raw}}

这就是错误：

zone.js:355 Unhandled Promise rejection: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
        </div>
    </div>
</div>
[ERROR ->]"): SignInComponent@29:0
Invalid ICU message. Missing '}'. ("
        </div>
    </div>
</div>
[ERROR ->]"): SignInComponent@29:0 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
        </div>
    </div>
</div>
[ERROR ->]"): SignInComponent@29:0
Invalid ICU message. Missing '}'. ("
        </div>
    </div>
</div>
[ERROR ->]"): SignInComponent@29:0
    at TemplateParser.parse (http://localhost:8000/node_modules/@angular/compiler/bundles/compiler.umd.js:8530:21)
    at RuntimeCompiler._compileTemplate (http://localhost:8000/node_modules/@angular/compiler/bundles/compiler.umd.js:16905:53)
    at eval (http://localhost:8000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:85)
    at Set.forEach (native)
    at compile (http://localhost:8000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:49)
    at ZoneDelegate.invoke (http://localhost:8000/node_modules/zone.js/dist/zone.js:203:28)
    at Zone.run (http://localhost:8000/node_modules/zone.js/dist/zone.js:96:43)
    at http://localhost:8000/node_modules/zone.js/dist/zone.js:462:57
    at ZoneDelegate.invokeTask (http://localhost:8000/node_modules/zone.js/dist/zone.js:236:37)
    at Zone.runTask (http://localhost:8000/node_modules/zone.js/dist/zone.js:136:47) Error: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
        </div>
    </div>
</div>

zone.js:355未处理的承诺拒绝：模板解析错误：
意外字符“EOF”（模板中是否有未转义的“{”字符？请使用“{{}}”）对其进行转义。）（“
[错误->]”：SignInComponent@29:0
ICU消息无效。缺少“}”。（“
[错误->]”：SignInComponent@29：0；区域：；任务：承诺。然后；值：错误：模板分析错误：
意外字符“EOF”（模板中是否有未转义的“{”字符？请使用“{{}}”）对其进行转义。）（“
[错误->]”：SignInComponent@29:0
ICU消息无效。缺少“}”。（“
[错误->]”：SignInComponent@29:0
在TemplateParser.parse(http://localhost:8000/node_modules/@angular/compiler/bundles/compiler.umd.js:8530:21）
在运行时编译器上(http://localhost:8000/node_modules/@angular/compiler/bundles/compiler.umd.js:16905:53）
评估时(http://localhost:8000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:85）
at Set.forEach（本机）
编译时(http://localhost:8000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:49）
在ZoneDelegate.invoke(http://localhost:8000/node_modules/zone.js/dist/zone.js:203:28)
在Zone.run(http://localhost:8000/node_modules/zone.js/dist/zone.js:96:43)
在http://localhost:8000/node_modules/zone.js/dist/zone.js:462:57
在ZoneDelegate.invokeTask(http://localhost:8000/node_modules/zone.js/dist/zone.js:236:37)
在Zone.runTask(http://localhost:8000/node_modules/zone.js/dist/zone.js:136:47)错误：模板分析错误：
意外字符“EOF”（模板中是否有未转义的“{”字符？请使用“{{}}”）对其进行转义。）（“

---

我分别用Slim 3和Twig制作了这个，但现在我想把它与Angular 2集成起来。谢谢！

组件HTML中的所有变量都是Twig变量。可能是