Angular2 Unexpected value in Service. Please add annotation

Question

In my Angular2 app am getting the following error Error: (SystemJS) Unexpected value 'ReleasesService' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.

My AppModule :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { routing } from './app.routes';
import { HttpModule } from '@angular/http';
import { SearchFilter } from '../app/search-filter.pipe';
import { ReleasesService } from '../app/releases/releases.service';
import { AppComponent }  from './app.component';
import { HomeComponent } from '../app/home/home.component';
import { ReleasesComponent } from '../app/releases/releases.component';
import { DistroComponent } from '../app/distro/distro.component';
import { ContactComponent } from '../app/contact/contact.component';

@NgModule({
  imports:      [ BrowserModule, HttpModule, routing ],
  declarations: [ AppComponent, 
                  SearchFilter,
                  HomeComponent, 
                  ReleasesComponent, 
                  ReleasesService,
                  DistroComponent, 
                  ContactComponent  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

My ReleasesService :

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { IRelease } from './release';
import 'rxjs/add/operator/map';

@Injectable()
export class ReleasesService {
  getReleases() {
    return IRelease;
  }
}

How to fix it? I reinstalled the Quickstarter (the base for my App), and having the same error when try to create the service.

Answer 1

declarations is only for declarable classes: Components Directives and Pipes

You can add ReleasesService to providers array

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

See also

• https://angular.io/guide/ngmodule-faq#what-classes-should-i-add-to-declarations

Answer 2

I had a similar problem, occurring while a project had angular2 as dependency and a project dependency (with the failing component) as well. Seems like angular2 metadata gets attached to the direct angular2 dependency, so the component in the project dependency wasn't declared in the angular2 of the project.

Workaround is to remove angular2 from the dependency (declaring it as devDependency there) and only use one angular2 instance.

Answer 3

Be sure the decorator has the caracter @.

If you don´t type @ before the decorator function you will have this error message

@Component({ selector: '...', }) -> Correct

Component({ selector: '...', }) -> ERROR MESAGE: 'add a @Pipe/@Directive/@component'