injectables not working in angular 2.0 latest build 26

Question

I was going thorugh the angular2.0 demo app but it seems that injectables are not working from build 24 and giving me error as
"ORIGINAL ERROR: Cannot resolve all parameters for MyAppComponent. Make sure they all have valid type or annotations."
till build 23 its working fine ,please help me with the issue
below is the demo code, i had made few manipulations from the original just for learning purpose

import {Component, View, bootstrap, NgFor} from 'angular2/angular2';


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


@Component({
    selector: 'array',
    injecetables: [FriendsService]

})
@View({
        template: '<p>My name: {{ myName }}</p><p>Friends:</p><ul><li *ng-for="#name of names">{{ name }}</li></ul>',
        directives: [NgFor]
}) 
   export class arrayComponent {
    myName: string;
    names: Array<string>;

    constructor(friendsService: FriendsService) {
       this.myName = 'Alice';
       this.names = friendsService.names;
     }
   }
 }

bootstrap(foo.arrayComponent);

Answer 1

It seems that the currently latest angular2, alpha-35, replaces appInjector with bindings.

Like this:

import {FriendsService} from 'FriendsService';

@Component({
    selector: 'array',
    bindings: [FriendsService]
})

I also had to explicitly export FriendsService:

export class FriendsService {

Complete code example here

Answer 2

The new syntax for injectables is appInjector.

Try:

@Component({
  selector: 'array',
  appInjector: [FriendsService]
})

Also, you will want to change your imports for Component and View to:

import {ComponentAnnotation as Component, ViewAnnotation as View} from "angular2/angular2";

Answer 3

In Angular 2 there is the application-wide injector and then there are the component injectors.

If you only want one instance of FriendsService across your entire app, then include it in the bootstrap() array:

@Component({
   // providers: [FriendsService],
   ...

bootstrap(App, [FriendsService])

If you would rather have one instance per component, use the providers array in the component's configuration object instead:

@Component({
   providers: [FriendsService ],
   ...

bootstrap(App, [])

Plunker

See the Hierarchical Injectors doc for more info.