Angular2 simple DI not working

Question

I have the following angular2 app with a simple dependency injected and it doesn't work. What am I missing?

Here's the error:

EXCEPTION: Cannot resolve all parameters for 'AppComponent'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'AppComponent' is decorated with Injectable.

and the code:

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

class DataService {
    items: Array<any>;

    constructor() {
        this.items = [
            { name: 'Christoph Burgdorf' },
            { name: 'Pascal Precht' },
            { name: 'thoughtram' }
        ];
    }

    getItems() {
        return this.items;
    }
}


@Component({
    selector: 'app',
    providers: [DataService],
    template: `
    <ul>
      <li *ngFor="#item of items">{{item.name}}</li>
    </ul>
  `
})
class AppComponent {
    items: Array<any>;
    constructor(dataService: DataService) {
        this.items = dataService.getItems();
    }
}

bootstrap(AppComponent, []);

Answer 1

Can't reproduce. I added your code to a Plunker

https://plnkr.co/edit/0DTjG5?p=preview

and it seems to work fine with or without @Injectable().

It is suggested to always add @Injectable() to services but it is only required when the service has constructor parameters.

.