Angular2：无法在另一个中显示组件模板（未捕获的解析错误）

Question

我正在尝试使用angular2显示一个非常简单的组件。当我运行服务器（使用ng-cli）时，我在google开发者控制台中收到以下错误：我迷路了...我只能想到这是一个HTML错误？知道我能做些什么来解决这个问题吗？

directive_normalizer.js:106
    Uncaught Error: Template parse errors:(…)
        DirectiveNormalizer.normalizeLoadedTemplate @ directive_normalizer.js:106
        DirectiveNormalizer.normalizeTemplateSync @ directive_normalizer.js:93
        DirectiveNormalizer.normalizeDirective @ directive_normalizer.js:69
        RuntimeCompiler._createCompiledTemplate @ runtime_compiler.js:231
        (anonymous function) @ runtime_compiler.js:159
        (anonymous function) @ runtime_compiler.js:155
        RuntimeCompiler._compileComponents @ runtime_compiler.js:154
        RuntimeCompiler._compileModuleAndComponents @ runtime_compiler.js:90
        RuntimeCompiler.compileModuleAsync @ runtime_compiler.js:81
        PlatformRef_._bootstrapModuleWithZone @ application_ref.js:328
        PlatformRef_.bootstrapModule @ application_ref.js:310
        (anonymous function) @ main.ts:12
        __webpack_require__ @ bootstrap c11ce27…:52
        (anonymous function) @ zone.js:1428
        __webpack_require__ @ bootstrap c11ce27…:52
        webpackJsonpCallback @ bootstrap c11ce27…:23
        (anonymous function) @ main.bundle.js:1

我的组件模板：

<ul class="list-group">                        
    <li class="list-group-item list-group-item-success">Description</li>
    <li class="list-group-item list-group-item-info">{{product.description}}</li>
    <li class="list-group-item list-group-item-success">Pos Description</li>
    <li class="list-group-item list-group-item-info">{{product.POSDescription}}</li>
    <li class="list-group-item list-group-item-success">Pos Price</li>
    <li class="list-group-item list-group-item-info">
        <span class="glyphicon glyphicon-star" />{{product.POSPrice}}
    </li>
    <li class="list-group-item list-group-item-success">Stock On Hand</li>
    <li  class="list-group-item list-group-item-info">{{product.StockOnHand}}</li>                        
</ul>

我的app.component.html模板应该包含产品组件：

<div class="row">
<div class="col-md-6 col-md-push-3">
<form class="form-horizontal" role="form">
    <div class="form-group">        
        <input type="number" class="form-control" id="barcode" placeholder="Enter Barcode" #barcode>    
    </div>
    <button class="btn btn-submit btn-block" (click)="submitBarcode(barcode)">Submit</button>
</form>
</div>
</div>
<div class="row">
    <app-product [product]="product"></app-product>
</div>

Answer 1

Angular2提供了有关异常的非常有用的信息。你应该只使用它。

另见

• Debugging Angular2 applications