模块“AppModule”声明的意外值“ProductListComponent”

Question

我是 Angular 的新手，在学习 Pluralsight 的 Angular 2 教程时被卡住了。

我有几个问题：

• 在运行 npm start 时显示 'app/products/product-list.component.ts(6,3)：错误 TS1146： 预期声明。'
• 控制台显示以下内容，意外值 由模块“AppModule”声明的“ProductListComponent”

以下是代码文件。任何帮助，将不胜感激。

app.component.ts

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

@Component({
    selector: 'pm-app',
    template: `
        <div>
            <h1>{{pageTitle}}</h1>
            <pm-products></pm-products>
        </div>
    `
})
export class AppComponent { 
    pageTitle: string = "Acme Product Management";
}

product-list.component.ts

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

@Component({
    selector: 'pm-products',
    templateUrl: 'app/products/product-list.component.html'
});

export class ProductListComponent {

}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { ProductListComponent } from './products/product-list.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ 
    AppComponent, 
    ProductListComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

product-list.component.html

<div class='panel panel-primary'>
    <div class='panel-heading'>
        Product List
    </div>

    <div class='panel-body'>
        <div class='row'>
            <div class='col-md-2'>Filter by:</div>
            <div class='col-md-4'>
                <input type="text" />
            </div>
        </div>
        <div class='row' >
            <div class='col-md-6'>
                <h3>Filtered by:</h3>
            </div>
        </div>

        <div class='table-responsive'>
            <table class='table'
                <thead>
                    <tr>
                        <th>
                            <button class='btn btn-primary'>
                                Show Image
                            </button>
                        </th>
                        <th>Product</th>
                        <th>Code</th>
                        <th>Available</th>
                        <th>Price</th>
                        <th>5 Star Rating</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
</div>

Screenshot of the console

谢谢！

Answer 1

你的@Component 装饰器末尾有一个;，删除它:-)