Angular2: unable to display component template in another (uncaught parse error)

i'm trying to display a very simple component using angular2. When I run the server (using ng-cli) I get the following error in the google developer console: i'm lost... All I can think is that this is an html error? Any idea what I can do to resolve this?

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

my component template:

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

my app.component.html template which is supposed to contain the product component:

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