Angular2 no provider for NameService

Question!

I've got problem with loading class into Angular2 component. I'm trying to solve for long time, even tried to add it to single file. What i have is:

Application.ts

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

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

@Component({
    selector:'my-app',
    injectables: [NameService]
})
@View({
    template:'<h1>Hi {{name}}</h1>' +
    '<p>Friends</p>' +
    '<ul>' +
    '   <li *ng-for="#name of names">{{name}}</li>' +
    '</ul>',
    directives:[NgFor]
})

class MyAppComponent
{
    name:string;
    names:Array<string>;

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

services/NameService.ts

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

All the time I'm getting error message saying "No provider for NameService" ...can someone help me spot that small issue with my code?

By : M.Svrcek


Answers

Angular2 requires you to declare all the injectables in bootstrap function call. Without this your service is not an injectable object.

bootstrap(MyAppComponent,[NameService]);
By : preet0982


In Angular v2.rc5 it is now:

@Component({ providers: [NameService], template: ... })



This video can help you solving your question :)
By: admin