Injections not working in angular 2.0 latest build 26

Question

I was about to make a demo application of angular2.0, but it seems that the injections do not work with build 24 and give me an error like
"ORIGINAL ERROR: it is not possible to resolve all parameters for MyAppComponent. Have a valid type or annotation."
prior to build 23 its working fine please help me with a problem
Below is a demo code, I did a few manipulations with the original for training purposes only

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] }) 

In addition, you will want to change your import to Component and View to:

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

Answer 2

It seems that the current angular2, alpha-35, is replacing appInjector with bindings .

Like this:

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

I also had to explicitly export FriendsService :

 export class FriendsService { 

Here is a complete code example

Answer 3

Angular 2 has an application-level injector, and then there are nozzle components.

If you only need one FriendsService instance for your entire application, include it in the bootstrap () array:

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

If you prefer to use one instance for each component, use the providers array in the component configuration object instead:

 @Component({ providers: [FriendsService ], ... bootstrap(App, []) 

Plunker

See Hierarchical Injectors for more information.

Answer 4

module foo {class FriendsService {...

Your FriendsService class FriendsService defined in a module, which is a problem in two ways:

• Your class must be exported from the module so that it appears outside of foo
• When you refer to FriendsSerivce , you do not indicate that it is inside the foo module.

I would suggest completely removing the foo module and using module templates in amd / commonjs instead. This means that you do not need to export the class (provided that they are in the same file), and you do not need to change the reference to the class in your component.

Answer 5

Your FriendsService abstracts inside the module and is not exported, so arrayComponent cannot access it and throws an error.

You should just take out the module and declare foo above arrayComponent in the same scope.

Also, your bootstrap at the end is incorrect, as arrayComponent not part of foo . Just have

bootstrap(arrayComponent)

and that should be good.