Angular no provider for NameService
You should be injecting NameService
inside providers
array of your AppModule
's NgModule
metadata.
@NgModule({
imports: [BrowserModule, ...],
declarations: [...],
bootstrap: [AppComponent],
//inject providers below if you want single instance to be share amongst app
providers: [MyService]
})
export class AppModule {
}
If you want to create an Dependency for particular component level without bothering about state of your application, then you can inject that dependency on component providers
metadata option like accepted @Klass answer shown.
As of Angular 2 Beta:
Add @Injectable
to your service as:
@Injectable()
export class NameService {
names: Array<string>;
constructor() {
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
getNames() {
return this.names;
}
}
and to your component config add the providers
as:
@Component({
selector: 'my-app',
providers: [NameService]
})
You have to use providers
instead of injectables
@Component({
selector: 'my-app',
providers: [NameService]
})
Complete code sample here.
In Angular 2 there are three places you can "provide" services:
- bootstrap
- root component
- 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.