Angular no provider for NameService

Question

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

/// <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;     } } 

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

Can someone help me spot the issue with my code?

Answer 1

You have to use providers instead of injectables

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

Complete code sample here.

Answer 2

In Angular 2 there are three places you can "provide" services:

1. bootstrap
2. root component
3. other components or directives

"The bootstrap provider option is intended for configuring and overriding Angular's own preregistered services, such as its routing support." -- reference

If you only want one instance of NameService across your entire app (i.e., Singleton), then include it in the providers array of your root component:

@Component({    providers: [NameService],    ... )} export class AppComponent { ... } 

Plunker

If you would rather have one instance per component, use the providers array in the component's configuration object instead:

@Component({    providers: [NameService],    ... )} export class SomeOtherComponentOrDirective { ... } 

See the Hierarchical Injectors doc for more info.