I am playing around with Angular2. As a basis, I used the [quickstart](https://angular.io/docs/js/latest/quickstart.html) project from the [angular.io](http://www.angular.io) page.

Everything seems to work fine, but as soon as I try to inject a service (`ItemService`) into my `AppComponent` I get following exception:

> 
> Error during instantiation of Token(ComponentRef)!. ORIGINAL ERROR: Cannot resolve all parameters for AppComponent. Make sure they all have valid type or annotations.
> 
> 
> 

I have seen similar issues on the internet (including stackoverflow, for example [this post](https://stackoverflow.com/questions/30239758/injectables-not-working-in-angular-2-0)), but none of them seem to solve my problem. Does any body have any idea, what the problem could be?

I have also seen some solutions (for example the ones in the Angular2 repo) which decorate the injectable class with the `Injectable`-annotation. However this doesn't work for me, as it is not defined in `angular.d.ts`. Am I using a wrong version?

You can find my solution in following Plunker:
<http://plnkr.co/edit/7kK1BtcuEHjaspwLTmsg>

For the record, you can also find my two files below. Please note that the `app.js` from the Plunker is the JavaScript file generated out of my TypeScript file below, the exception is always the same.

`index.html`:

```html
<html>
    <head>
        <title>Testing Angular2</title>
        <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
        <script src="https://jspm.io/system@0.16.js"></script>
        <script src="https://code.angularjs.org/2.0.0-alpha.23/angular2.dev.js"></script>
    </head>
    <body>
        <app></app>
        <script>
            System.import('js/app');
        </script>
    </body>
</html> 

```

`js/app.ts`:

```typescript
/// <reference path="../../typings/angular2/angular2.d.ts" />

import {Component, View, bootstrap, For, If} from "angular2/angular2";

class Item {
    id:number;
    name:string;

    constructor(id:number, name:string) {
        this.id = id;
        this.name = name;
    }
}

class ItemService {
    getItems() {
        return [
            new Item(1, "Bill"),
            new Item(2, "Bob"),
            new Item(3, "Fred")
        ];
    }
}

@Component({
    selector: 'app',
    injectables: [ItemService]
})
@View({
    template: `<h1>Testing Angular2</h1>
               <ul>
                 <li *for="#item of items">
                   {{item.id}}: {{item.name}} |
                   <a href="javascript:void(0);" (click)="toggleSelected(item);">
                     {{selectedItem == item ? "unselect" : "select"}}
                   </a>
                 </li>
               </ul>
               <item-details *if="selectedItem" [item]="selectedItem"></item-details>`,
    directives: [For, If, DetailComponent]
})
class AppComponent {
    items:Item[];
    selectedItem:Item;

    constructor(itemService:ItemService) {
        this.items = itemService.getItems();
    }

    toggleSelected(item) {
        this.selectedItem = this.selectedItem == item ? null : item;
    }
}

@Component({
    selector: 'item-details',
    properties: {
        item: "item"
    }
})
@View({
    template: `<span>You selected {{item.name}}</span>`
})
class DetailComponent {
    item:Item;
}

bootstrap(AppComponent);

```

Thanks in advance for any ideas!