Angular component unexpected value

I am finally learning Angular, but I ran into a problem. I am trying to create a warning component, but I am getting the following console error:

Unexpected value 'WarningComponent' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.

Here is my main app.component.html code:

<div class="container">
  <div class="row">
    <div class="col-xs-12">
        <app-warning></app-warning>
    </div>
  </div>
</div>

Here is my app.module.ts code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';
import { ServersComponent } from './servers/servers.component';
import { WarningComponent } from './warning/warning.component';

@NgModule({
  declarations: [
  AppComponent,
  ServerComponent,
  ServersComponent,
  WarningComponent
],
imports: [
  BrowserModule,
  FormsModule,
  HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Here is the actual warning.component.ts code:

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

@Component({
selector: 'app-warning',
templateUrl: './warning.component.html'
});

export class WarningComponent {

}

Finally, here is the warning.component.html code (which is just some a warning text):

<h3>Warning</h3>

The page should simply output the text "Warning", but I am unsuccessful.