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提供了有關異常的非常有用的信息。 您只應正確使用它。

也可以看看

• 調試Angular2應用程序