title: Angular no provider for NameService
body: <p>I've got a problem loading a class into an Angular component. I've been trying to solve it for a long time; I've even tried joining it all in a single file. What I have is:</p>
  
  <p><strong>Application.ts</strong></p>
  
  <pre><code>/// &lt;reference path="../typings/angular2/angular2.d.ts" /&gt;
  
  import {Component,View,bootstrap,NgFor} from "angular2/angular2";
  import {NameService} from "./services/NameService";
  
  @Component({
      selector:'my-app',
      injectables: [NameService]
  })
  @View({
      template:'&lt;h1&gt;Hi {{name}}&lt;/h1&gt;' +
      '&lt;p&gt;Friends&lt;/p&gt;' +
      '&lt;ul&gt;' +
      '   &lt;li *ng-for="#name of names"&gt;{{name}}&lt;/li&gt;' +
      '&lt;/ul&gt;',
      directives:[NgFor]
  })
  
  class MyAppComponent
  {
      name:string;
      names:Array&lt;string&gt;;
  
      constructor(nameService:NameService)
      {
          this.name = 'Michal';
          this.names = nameService.getNames();
      }
  }
  bootstrap(MyAppComponent);
  </code></pre>
  
  <p><strong>services/NameService.ts</strong></p>
  
  <pre><code>export class NameService {
      names: Array&lt;string&gt;;
      constructor() {
          this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
      }
      getNames()
      {
          return this.names;
      }
  }
  </code></pre>
  
  <p>I keep getting an error message saying <code>No provider for NameService</code>.</p>
  
  <p>Can someone help me spot the issue with my code? </p>