Wsrtjtyk

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.

You need to remove the semicolon that's after @Component({}) in your warning.component.ts