title: Share services to multiple components
body: <p>I am trying to share few services all over my app, theses services are in charge of the API call on my node server.</p>
  
  <p>By following the official documentation, this is what I tried</p>
  
  <pre><code>// app.component.ts
  
  import { Component }            from "@angular/core";
  import { ROUTER_DIRECTIVES }    from '@angular/router';
  import "./rxjs-operators";
  import {CampaignApiService}     from "./services/api/campaign.api.service";
  import {PlatformApiService}     from "./services/api/platform.api.service";
  import {TeamApiService}         from "./services/api/team.api.service";
  import {UserApiService}         from "./services/api/user.api.service";
  
  
  @Component({
      moduleId: module.id,
      selector: 'app',
      templateUrl: "app.component.html",
      providers: [
          TeamApiService,
          PlatformApiService,
          CampaignApiService,
          UserApiService,
      ],
      styleUrls: [],
      directives: [ROUTER_DIRECTIVES]
  })
  export class AppComponent { }
  </code></pre>
  
  <p>In one of my components I am now trying to access my team.api.service which is supposed to be accessible because provided by one of the parents components, but I am facing this error</p>
  
  <blockquote>
    <p>ReferenceError: TeamApiService is not defined
            at eval (app/components/team/index/team.index.component.js:48:77)</p>
  </blockquote>
  
  <p>The only component between my app and teamIndex is the router, I probably missed something about dependency injections.</p>
  
  <p>This is the component involved in the rendering which cause the error</p>
  
  <pre><code>// team.index.component.ts
  
  import {
      Component, trigger,
      state, style,
      transition, animate,
      OnInit
  }                               from "@angular/core";
  import { JSONP_PROVIDERS }      from '@angular/http';
  import { TeamShowComponent }    from "../show/team.show.component";
  import { Observable }           from 'rxjs/Observable';
  
  // Users
  import { Team }                 from "../../../models/team.model";
  import { TeamService }          from "../../../services/team.service";
  
  @Component({
      moduleId: module.id,
      selector: 'TeamIndex',
      templateUrl: "team.index.html",
      providers: [JSONP_PROVIDERS, TeamService, TeamApiService],
      directives: [TeamShowComponent],
      animations: [
          trigger('teamSelected', [
              state('false', style({
                  transform: 'scale(1)'
              })),
              state('true', style({
                  transform: 'scale(1)',
                  "z-index": 25
              })),
              transition('false =&gt; true', animate('100ms ease-in')),
              transition('true =&gt; false', animate('100ms ease-out'))
          ])]
  })
  
  export class TeamIndexComponent implements OnInit {
      teams: Observable&lt;Team[]&gt;;
      distinctSettings: string[];
      mode = "Observable";
      selectedTeam: Team;
  
      constructor (private teamService: TeamService, private teamApiService: TeamApiService) {}
  
      ngOnInit() {
          this.getTeams();
          this.teams.subscribe(
              teams =&gt; {
                  this.distinctSettings = this.teamService.getDistinctSettings(teams)
              }
          )
      }
  
      getTeams() {
          this.teams = this.teamApiService.getTeams();
      }
  
      onSelect(team: Team) {
          if (team === this.selectedTeam)
              this.selectedTeam = null;
          else
              this.selectedTeam = team;
      }
  
      isSelected(team: Team) {
          return team === this.selectedTeam;
      }
  }
  </code></pre>
  
  <p>I feel obviously a bit weird to didn't import my team.api.service in the component where I am using it. If I add this import it's working well, but then according to the documentation I will be using different instances of my service.</p>