Unexpected value 'ProductListComponent' declared by the module 'AppModule'

Question

I'm new to Angular and am stuck while following Pluralsight's Angular 2 tutorial.

I've couple of problems here:

• on running npm start it says 'app/products/product-list.component.ts(6,3): error TS1146: Declaration expected.'
• Console displays the following, Unexpected value 'ProductListComponent' declared by the module 'AppModule'

Below are the code files. Any help would be appreciated.

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

Thank you!

Answer 1

You have a ; at the end of your @Component decorator, remove it :-)