Angulaire aucun fournisseur pour NameService

Vous devez utiliser providers au lieu de injectables

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

Exemple de code complet ici.

Comme Angulaire 2 Beta:

Ajouter @Injectable à votre service:

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

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

    getNames() {
        return this.names;
    }
}

et à votre composant config ajouter le providers comme:

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

Vous devriez être en injectant NameService à l'intérieur de fournisseurs de tableau de votre AppModule de NgModule métadonnées.

@NgModule({
   providers: [MyService]
})

et être sûr de les importer dans votre composant du même nom (sensible à la casse),parce que SystemJs est sensible à la casse (par conception). Si vous utilisez différents nom de chemin d'accès des fichiers de votre projet comme ceci:

principal.le module.ts

import { MyService } from './MyService';

votre composant.ts

import { MyService } from './Myservice';

ensuite, le Système js fera double importations

Scandaleusement, la syntaxe a changé encore dans la dernière version du Angulaire 🙂 De la Angulaire 6 docs:

Début Angulaire 6.0, la meilleure façon de créer un singleton
services est de spécifier sur le service qu'il devrait être présenté dans
la racine de l'application. Ceci est fait en mettant providedIn à la racine
le service @Injectable décorateur:

src/app/utilisateur.service.0.ts

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

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

L'erreur No provider for NameService est un problème commun que beaucoup de Angular2 débutants visage.

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

Solution:

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

Salut , Vous pouvez l'utiliser dans vos .ts fichier :

d'abord importer votre service dans ce .ts fichier:

import { Your_Service_Name } from './path_To_Your_Service_Name';

Puis, 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> `   
    })

Vous devez l'ajouter à des fournisseurs de tableau, ce qui inclut tous les depency sur votre composant.

Oeil à cette section angulaire de la documentation:

Enregistrement des fournisseurs dans un composant

Voici une version révisée de HeroesComponent que les registres de la HeroService dans son
les fournisseurs de tableau.

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 de l'application

D'une part, un prestataire dans un NgModule est enregistré à la racine
injecteur. Cela signifie que chaque fournisseur inscrit au sein d'une NgModule
sera accessible dans l'ensemble de l'application.

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

Ici, le APP_CONFIG le service doit être disponible dans tout le
de l'application, il est donc inscrit dans la AppModule @NgModule fournisseurs
tableau. Mais depuis le HeroService est utilisé uniquement dans le Héros
zone de fonctionnalité et nulle part ailleurs, il est judicieux de l'inscrire dans la
HeroesComponent.

Voir aussi "dois-je ajouter application à l'échelle de fournisseurs de la racine AppModule ou l'
racine AppComponent?" dans le NgModule FAQ.

Donc dans votre cas, il suffit de changer les injectables pour les fournisseurs comme ci-dessous:

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

Également dans les nouvelles versions de Anguleuses, @Vue et quelques autres choses disparu.

Pour plus d'info ,visitez ici.

Ajouter @Injectable à votre service:

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:

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

ou si vous souhaitez accéder à votre service partout dans l'application, vous pouvez passer d'un fournisseur d'application

Angulaire vous pouvez vous inscrire à un service de deux façons:

1. Registre de service dans le module ou composant racine

Effets:

• Disponible dans tous les composants
• Disponibles sur la durée de vie de l'application

Vous devez prendre soin de si vous vous inscrivez à un service dans un paresseux chargé du module:

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

• Le service sera disponible sur la durée de vie de l'application uniquement lorsque le module est chargé

2. S'inscrire à un service en tout autre composant de l'application

Effets:

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

Vous devez prendre soin de si vous vous inscrivez à un service en tout autre composant de l'application

• L'instance de l'injection de service sera disponible uniquement dans le composant et tous ses enfants.

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