Injectables not working in angular 2.0

Question

I recently started playing with Angular2. I've been trying to get injectables to work for about half a day now, but I still can't figure out what I'm doing wrong.

To keep it as simple as possible, I copied code from 5 Min Quickstart in the official webpage. Demo itself works fine, but when i try to use injectables, I get an error saying

ORIGINAL ERROR: Cannot resolve all parameters for MyAppComponent. Make sure they all have valid type or annotations.

My typescript file

/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap,} from 'angular2/angular2';

class Names {}

// Annotation section
@Component({
    selector: 'my-app',
    injectables: [Names]
})
@View({
    template: '<h1>Hello {{ name }}</h1>'
})
// Component controller
class MyAppComponent {
    name: string;
    constructor(names: Names) {
        this.name = 'Alice';
    }
}

bootstrap(MyAppComponent);

P.S. As in the 5 Min Quickstart, I'm using Traceur, SystemJS and Angular2 alpha (23)

Does anyone know what I'm missing?

Answer 1

Your compiler does not add parameters properties to the MyAppComponent (from looking at your pluker). I think this is the problem. If you add

MyAppComponent.parameters = [[Names]]

then all will works well.

1. Here is your plunker with fix.
2. Here is the same example in TS (with ES6)

UPD Thanks to @GrayFox for pointing out the correct way (see the comment bellow):

For future references - use --emitDecoratorMetadata flag when using tsc or add emitDecoratorMetadata: true to the configuration if you're using gulp-typescript

See TypeScript compiler options here (you can find emitDecoratorMetada there).