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

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 2

module foo{ class FriendsService {...

Your FriendsService class is defined within a module which is an issue in two ways:

1. Your class needs to be exported from the module to make it visible outside of foo
2. When you reference FriendsSerivce you are not specifying that it is inside the foo module.

I would suggest completely removing the foo module and rely on the module patterns in amd/commonjs instead. That means you don't need to export the class (assuming they're in the same file) and you don't need to change the reference to the class in your component.

Answer 3

Your FriendsService is abstracted within a module and is not being exported, that's why arrayComponent can't access it and throws an error.

You should just take out the module and have foo be declared above arrayComponent in the same scope.

Also, your bootstrap at the end is wrong since arrayComponent isn't part of foo. Just have it be

bootstrap(arrayComponent)

and it should be fine.

Answer 4

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 5

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.