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 i

Answer 1

In Angular v2 and up it is now:

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

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.

Answer 3

You should be injecting NameService inside providers array of your AppModule's NgModule metadata.

@NgModule({
   providers: [MyService]
})

and be sure import in your component by same name (case sensitive),becouse SystemJs is case sensitive (by design). If you use different path name in your project files like this:

main.module.ts

import { MyService } from './MyService';

your-component.ts

import { MyService } from './Myservice';

then System js will make double imports

Answer 4

In Angular you are able to register a service in two ways:

1. Register a service in module or root component

Effects:

• Available into all components
• Available on lifetime application

You should take care if you register a service into a lazy loaded module:

• The service is available only into components declared into that module

• The service will be available on lifetime application only when the module is loaded

2. Register a service into any other application component

Effects:

• Will be injected a separate instance of the Service into the component

You should take care if you register a service into any other application component

• The instance of the injected service will be available only into the component and all of its children.

• The instance will be available on the component lifetime.

Answer 5

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]
})

Answer 6

Angular 2 has changed, here is what the top of your code should look like:

import {
  ComponentAnnotation as Component,
  ViewAnnotation as View, bootstrap
} from 'angular2/angular2';
import {NameService} from "./services/NameService";

@Component({
  selector: 'app',
  appInjector: [NameService]
})

Also, you may want to use getters and setters in your service:

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

Then in your app you can simply do:

this.names = nameService.names;

I suggest you go to plnkr.co and create a new Angular 2 (ES6) plunk and get it to work in there first. It will set everything up for you. Once it's working there, copy it over to your other environment and triage any issues with that environment.