J'ai cherché cette question mais je n'ai pas trouvé, et j'ai beaucoup essayé de résoudre ce problème, mais je suis nouveau dans angular 2 et je crée une application de démonstration à l'aide de documents angulaires. Mon application fonctionnait avec succès avant un certain temps. Mais lorsque j'ajoute un nouveau service, j'ai cette exception:

EXCEPTION: aucun fournisseur pour HeroService!

Je suis sûr que je fais mal quelque part, est-ce que quelqu'un peut me dire où je fais mal?

Structure des dossiers:

app
    app.component.ts
    app.module.ts
    hero.service.ts
    hero.ts
    hero-detail.component.ts
    main.ts
    mock-hero.ts
node_modules ...
index.html
package.json
styles.css
systemjs.config.js
tsconfig.json

app.component.ts-

//app.component.ts
import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
       <h2>My Heroes</h2>
    <ul class="heroes">
        <li *ngFor="let hero of heroes"
              [class.selected]="hero === selectedHero"
              (click)="onSelect(hero)">
           <span class="badge">{{hero.id}}</span> {{hero.name}}
       </li>
    </ul>
    <my-hero-detail [hero]="selectedHero"></my-hero-detail>`,
})

export class AppComponent implements OnInit {
  title = 'Tour of Heroes';
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private heroService: HeroService) { }

  getHeroes(): void {
    this.heroService.getHeroes().then(heroes => this.heroes = heroes);
  }

  ngOnInit(): void {
    this.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }
}

hero.service.ts-

// hero.service.ts

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
@Injectable()
export class HeroService {
  getHeroes(): Promise<Hero[]> {
    return Promise.resolve(HEROES);
  };
getHeroesSlowly(): Promise<Hero[]> {
  return new Promise(resolve => {
    // Simulate server latency with 2 second delay
    setTimeout(() => resolve(this.getHeroes()), 2000);
  });
}
}

hero.ts-

//hero.ts
export class Hero {
  id: number;
  name: string;
}

mock-heroes.ts-

//mock-heroes.ts
import { Hero } from './hero';

export const HEROES: Hero[] = [
  {id: 11, name: 'Mr. Nice'},
  {id: 12, name: 'Narco'},
  {id: 13, name: 'Bombasto'},
  {id: 14, name: 'Celeritas'},
  {id: 15, name: 'Magneta'},
  {id: 16, name: 'RubberMan'},
  {id: 17, name: 'Dynama'},
  {id: 18, name: 'Dr IQ'},
  {id: 19, name: 'Magma'},
  {id: 20, name: 'Tornado'}
];

app.module.ts-

//app.module.ts
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms'

import { AppComponent }  from './app.component';
import { MyComponent }  from './my.component';
import { ShubhComponent }  from './my.component';

import { HeroDetailComponent } from './hero-detail.component';


@NgModule({
  imports:      [ BrowserModule,FormsModule ],
  declarations: [ AppComponent ,MyComponent,HeroDetailComponent,ShubhComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Pour une meilleure compréhension, je joins un instantané:

enter image description here

1
Shubham Verma 24 janv. 2017 à 14:57

5 réponses

Meilleure réponse

Essayez quelque chose comme ça

 @Component({
      selector: 'my-app',
      providers: [Your Service Name],
      template: `
        <h1>{{title}}</h1>
           <h2>My Heroes</h2>
        <ul class="heroes">
            <li *ngFor="let hero of heroes"
                  [class.selected]="hero === selectedHero"
                  (click)="onSelect(hero)">
               <span class="badge">{{hero.id}}</span> {{hero.name}}
           </li>
        </ul>
        <my-hero-detail [hero]="selectedHero"></my-hero-detail>`,
    })
2
MMK 24 janv. 2017 à 12:02

Vous devez déclarer votre service dans la section fournisseurs du @NgModule:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { HeroService } from './service/hero.service.ts';

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

Voici la documentation de NgModule: https://angular.io/docs/ts /latest/guide/ngmodule.html

0
belkor 24 janv. 2017 à 12:02

Vous devez fournir le service dans le module qui charge le composant qui l'utilise. Dans votre cas, chargez-le dans app.module, au tableau des fournisseurs.

0
Bruno João 24 janv. 2017 à 12:01

Ajoutez providers: [Service Name] dans votre composant.

 @Component({
      selector: 'my-app',
      providers: [Service Name],
     ...............
    ................

    })
0
user7493514user7493514 31 janv. 2017 à 06:55

Ajouter le service en tant que fournisseur au module app.module

0
Shree 23 juil. 2018 à 06:32