Angular2 Valeur inattendue dans Service. Veuillez ajouter une annotation

Question

Dans mon application Angular2, j'obtiens l'erreur suivante Erreur: (SystemJS) Valeur inattendue 'ReleasesService' déclarée par le module 'AppModule'. Veuillez ajouter une annotation @ Pipe / @ Directive / @ Component.

Mon 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 { }
 

Mes versionsService :

 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;
  }
}
 

Comment le réparer? J'ai réinstallé le Quickstarter (la base de mon application) et j'ai la même erreur lorsque j'essaie de créer le service.

Answer 1

declarations est uniquement pour les classes déclarables: directives de composants et tuyaux

Vous pouvez ajouter ReleasesService à providers tableau

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

Voir également

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

Answer 2

J'ai eu un problème similaire, se produisant alors qu'un projet avait angular2 comme dépendance et une dépendance de projet (avec le composant défaillant) également. Il semble que les métadonnées angular2 soient attachées à la dépendance angular2 directe, donc le composant dans la dépendance du projet n'a pas été déclaré dans l'angular2 du projet.

La solution consiste à supprimer angular2 de la dépendance (en la déclarant comme devDependency) et à n'utiliser qu'une seule instance angular2.

Answer 3

Assurez-vous que le décorateur a le caractère @.

Si vous ne tapez pas @ avant la fonction décorateur, vous aurez ce message d'erreur

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

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