Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2 Unexpected value in Service. Please add annotation

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.

like image 876
Alexandr Belov Avatar asked Mar 28 '17 19:03

Alexandr Belov


2 Answers

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
like image 119
yurzui Avatar answered Oct 10 '22 04:10

yurzui


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.

like image 39
Maximilian Friedmann Avatar answered Oct 10 '22 04:10

Maximilian Friedmann