Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

106
Views
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.

8 months ago · Santiago Trujillo
3 answers
Answer question

0

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
8 months ago · Santiago Trujillo Report

0

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.

8 months ago · Santiago Trujillo Report

0

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'
8 months ago · Santiago Trujillo Report
Answer question
Find remote jobs