web-dev-qa-db-fra.com

Angular2 Valeur inattendue dans Service. S'il vous plaît ajouter une annotation

Dans mon application Angular2, l'erreur suivante s'affiche Erreur: La valeur inattendue 'ReleasesService' (SystemJS) déclarée par le module 'AppModule'. Ajoutez 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 { }

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

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

javascriptangulartypescript
28
Alexandr Belov

declarations ne concerne que les classes déclarables: Composants Directives et Pipes

Vous pouvez ajouter ReleasesService à providers array

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

Voir également

41
yurzui

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). On dirait que les métadonnées angular2 sont attachées à la dépendance directe angular2, de sorte que le composant dans la dépendance du projet n'a pas été déclaré dans angular2 du projet.

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

1
Maximilian Friedmann

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'
0
Nirbhay Jha