Angular no provider for NameService

I've got a problem loading a class into an Angular component. I've been trying to solve it for a long time; I've even tried joining it all in a single file. What I have is:

Application.ts

/// 

import {Component,View,bootstrap,NgFor} from "angular2/angular2";
import {NameService} from "./services/NameService";

@Component({
    selector:'my-app',
    injectables: [NameService]
})
@View({
    template:'Hi {{name}}' +
    'Friends' +
    '' +
    '   {{name}}' +
    '',
    directives:[NgFor]
})

class MyAppComponent
{
    name:string;
    names:Array;

    constructor(nameService:NameService)
    {
        this.name = 'Michal';
        this.names = nameService.getNames();
    }
}
bootstrap(MyAppComponent);

services/NameService.ts

export class NameService {
    names: Array;
    constructor() {
        this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }
    getNames()
    {
        return this.names;
    }
}

I keep getting an error message saying No provider for NameService.

Can someone help me spot the issue with my code?

You have to use providers instead of injectables

@Component({
selector: 'my-app',
providers: [NameService]
})


Complete code sample here.

Stack Overflow Q#30580083, score: 540