web-dev-qa-db-fra.com

Aucun fournisseur angulaire pour NameService

J'ai un problème avec le chargement de la classe dans le composant angulaire. J'essaie de résoudre depuis longtemps, même essayé de l'ajouter à un seul fichier. Ce que j'ai c'est:

Application.ts 

/// <reference path="../typings/angular2/angular2.d.ts" />

import {Component,View,bootstrap,NgFor} from "angular2/angular2";
import {NameService} from "./services/NameService";

@Component({
    selector:'my-app',
    injectables: [NameService]
})
@View({
    template:'<h1>Hi {{name}}</h1>' +
    '<p>Friends</p>' +
    '<ul>' +
    '   <li *ng-for="#name of names">{{name}}</li>' +
    '</ul>',
    directives:[NgFor]
})

class MyAppComponent
{
    name:string;
    names:Array<string>;

    constructor(nameService:NameService)
    {
        this.name = 'Michal';
        this.names = nameService.getNames();
    }
}
bootstrap(MyAppComponent);

services/NameService.ts 

export class NameService {
    names: Array<string>;
    constructor() {
        this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }
    getNames()
    {
        return this.names;
    }
}

Tout le temps je reçois un message d'erreur disant "Aucun fournisseur pour NameService" ...

Quelqu'un peut-il m'aider à repérer ce petit problème avec mon code? 

typescriptangularsystemjs
249
M.Svrcek

Vous devez utiliser providers au lieu de injectables

@Component({
    selector: 'my-app',
    providers: [NameService]
})

Exemple de code complet ici .

391
Klas Mellbourn

Dans Angular 2, vous pouvez "fournir" des services à trois endroits:

  1. bootstrap
  2. composant racine
  3. autres composants ou directives

"L'option du fournisseur d'amorçage est destinée à la configuration et à la substitution des services pré-enregistrés d'Angular, tels que sa prise en charge du routage." - référence

Si vous souhaitez uniquement une instance de NameService dans l’ensemble de votre application (par exemple, Singleton), incluez-la dans le tableau providersde votre composant racine:

@Component({
   providers: [NameService],
   ...
)}
export class AppComponent { ... }

Plunker

Si vous préférez une instance par composant, utilisez plutôt le tableau providersdans l'objet de configuration du composant:

@Component({
   providers: [NameService],
   ...
)}
export class SomeOtherComponentOrDirective { ... }

Voir le Injecteurs hiérarchiques doc pour plus d'informations.

73
Mark Rajcok

À partir de Angular 2 Beta:

Ajouter @Injectable à votre service en tant que:

@Injectable()
export class NameService {
    names: Array<string>;

    constructor() {
        this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }

    getNames() {
        return this.names;
    }
}

et à votre configuration de composant ajouter le providers comme:

@Component({
    selector: 'my-app',
    providers: [NameService]
})
32
magiccrafter

Vous devriez injecter NameService à l'intérieur du tableau providers des métadonnées de votre AppModule's NgModule.

@NgModule({
   imports: [BrowserModule, ...],
   declarations: [...],
   bootstrap: [AppComponent],
   //inject providers below if you want single instance to be share amongst app
   providers: [MyService]
})
export class AppModule {

}

Si vous souhaitez créer une dépendance pour un niveau de composant particulier sans vous soucier de l'état de votre application, vous pouvez alors injecter cette dépendance sur l'option de métadonnées du composant providers telle que acceptée @Klass answer affichée.

19
Pankaj Parkar

Dans Angular v2 et supérieur, il est maintenant:

@Component({ selector:'my-app', providers: [NameService], template: ... })

12
supercobra

Vous devriez injecter NameService dans le tableau des fournisseurs des métadonnées NgModule de votre AppModule.

@NgModule({
   providers: [MyService]
})

et assurez-vous que l'importation dans votre composant porte le même nom (sensible à la casse), car SystemJs est sensible à la casse (par conception). Si vous utilisez un nom de chemin différent dans vos fichiers de projet, procédez comme suit:

main.module.ts

import { MyService } from './MyService';

votre-composant.ts

import { MyService } from './Myservice';

alors le système js fera des doubles importations 

12
saghar.fadaei

Angular 2 a changé, voici à quoi devrait ressembler le haut de votre code:

import {
  ComponentAnnotation as Component,
  ViewAnnotation as View, bootstrap
} from 'angular2/angular2';
import {NameService} from "./services/NameService";

@Component({
  selector: 'app',
  appInjector: [NameService]
})

De plus, vous voudrez peut-être utiliser des getters et des setters à votre service:

export class NameService {
    _names: Array<string>;
    constructor() {
        this._names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }
    get names() {
        return this._names;
    }
}

Ensuite, dans votre application, vous pouvez simplement faire:

this.names = nameService.names;

Je vous suggère d’aller sur plnkr.co et de créer un nouveau dossier Angular 2 (ES6) et de le faire fonctionner en premier. Tout sera mis en place pour vous. Une fois que cela fonctionne, copiez-le dans votre autre environnement et triez tous les problèmes liés à cet environnement.

7
unobf

L'erreur No provider for NameService est un problème courant auquel de nombreux débutants d'Angular2 sont confrontés. 

Raison : Avant d'utiliser un service personnalisé, vous devez d'abord l'enregistrer auprès de NgModule en l'ajoutant à la liste des fournisseurs:

Solution: 

@NgModule({
    imports: [...],
    providers: [CustomServiceName]
})
6
Suneet Bansal

Étonnamment, la syntaxe a encore changé dans la dernière version de Angular :-) À partir du Angular 6 docs :

En commençant par Angular 6.0, la méthode préférée pour créer un singleton services est de spécifier sur le service qu'il doit être fourni dans la racine de l'application. Ceci est fait en plaçant àInfini root sur le décorateur @Injectable du service:

src/app/user.service.0.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {
}
6
Derrick Miller

Vous pouvez aussi avoir les dépendances déclarées dans la commande bootstrap comme ceci:

bootstrap(MyAppComponent,[NameService]);

Au moins c'est ce qui a fonctionné pour moi dans alpha40.

c'est le lien: http://www.syntaxsuccess.com/viewarticle/dependency-injection-in-angular-2.0

5
Tobias Gassmann

Ajoutez-le à fournisseurs pas injectables  

@Component({
    selector:'my-app',
    providers: [NameService]
})
4
Gopinath Kaliappan

Bonjour, vous pouvez utiliser ceci dans votre fichier .ts:

commencez par importer votre service dans ce fichier .ts: 

import { Your_Service_Name } from './path_To_Your_Service_Name';

Ensuite, dans le même fichier, vous pouvez ajouter providers: [Your_Service_Name]:

 @Component({
      selector: 'my-app',
      providers: [Your_Service_Name],
      template: `
        <h1>Hello World</h1> `   
    })
4
Shubham Verma

Vous devez l'ajouter au tableau providers, qui inclut toutes les dépendances de votre composant.

Regardez cette section dans la documentation angulaire:

Enregistrement de fournisseurs dans un composant

Voici un composant Heroes révisé qui enregistre HeroService dans son tableau de fournisseurs.

import { Component } from '@angular/core';

import { HeroService } from './hero.service';

@Component({
  selector: 'my-heroes',
  providers: [HeroService],
  template: `
  <h2>Heroes</h2>
  <hero-list></hero-list>
  `
})
export class HeroesComponent { }

Quand utiliser NgModule par rapport à un composant d'application

D'une part, un fournisseur dans un NgModule est enregistré dans la racine injecteur. Cela signifie que chaque fournisseur enregistré dans un NgModule sera accessible dans toute l'application.

D'autre part, un fournisseur inscrit dans un composant d'application est disponible uniquement sur ce composant et tous ses enfants.

Ici, le service APP_CONFIG doit être disponible dans tout le fichier Il est donc enregistré dans les fournisseurs AppModule @NgModule tableau. Mais puisque HeroService n’est utilisé que dans les héros zone de fonctionnalités et nulle part ailleurs, il est logique de l'enregistrer dans le HeroesComponent.

Voir aussi "Dois-je ajouter des fournisseurs d'application à la racine AppModule ou au Root AppComponent?" dans la FAQ NgModule.

Donc, dans votre cas, il suffit de changer les produits injectables en fournisseurs comme suit

@Component({
  selector: 'my-app',
  providers: [NameService]
})

Également dans les nouvelles versions de Angular, @View et d'autres éléments disparus.

Pour plus d'informations, visitez ici . 

2
Alireza

ajoutez votre service à providers [] array dans le fichier app.module.ts . Comme ci-dessous 

// ici mon service est CarService

app.module.ts 

import {CarsService} from './cars.service';

providers: [CarsService] // you can include as many services you have
1
Surendra Parchuru

Ajoutez @Injectable à votre service en tant que:

export class NameService {
    names: Array<string>;

    constructor() {
        this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }

    getNames() {
        return this.names;
    }
}

et dans votre composant, ajoutez les fournisseurs en tant que:

@Component({
    selector: 'my-app',
    providers: [NameService]
})

ou si vous voulez accéder à votre service partout dans l'application, vous pouvez passer au fournisseur de l'application

1
sachinkasana

Angular2 nécessite que vous déclariez tous les injectables dans l'appel de la fonction bootstrap. Sans cela, votre service n'est pas un objet injectable.

bootstrap(MyAppComponent,[NameService]);
1
preet0982

Blockquote

Enregistrement de fournisseurs dans un composant

Voici un composant Heroes révisé qui enregistre HeroService dans son tableau de fournisseurs.

import { Component } from '@angular/core';

import { HeroService } from './hero.service';

@Component({
  selector: 'my-heroes',
  providers: [HeroService],
  template: `
  `
})
export class HeroesComponent { }
0
ORBIT

Dans Angular, vous pouvez enregistrer un service de deux manières:

1. Enregistrer un service dans le module ou le composant racine

Effets:

  • Disponible dans tous les composants
  • Disponible à vie

Vous devez faire attention si vous enregistrez un service dans un module chargé paresseux:

  • Le service est disponible uniquement dans les composants déclarés dans ce module

  • Le service sera disponible sur l'application à vie uniquement lorsque le module sera chargé.

2. Enregistrer un service dans tout autre composant d'application

Effets:

  • Sera injecté une instance distincte du service dans le composant

Vous devez faire attention si vous enregistrez un service dans tout autre composant d'application

  • L'instance du service injecté ne sera disponible que dans le composant et tous ses enfants.

  • L'instance sera disponible sur la durée de vie du composant.

0
Rzv Razvan