How to inject a provider in Angular 2 service from action?

Question

I am trying to remove the dependency of components on services in Angular with the help of Redux.

Basically, the flow is Component -> Action -> Service

In the service I want to use http module of @angular/core, which is suggested to be passed in the constructor:

export class SampleService {
    constructor(public http: Http) {}
}

And as I am calling service from action, it won't get the http provider as I do not have an instance of http provider in it.

export default class SampleAction {
    private _projectService;
    constructor() {
        this._sampleService = new SampleService();
    }
}

How can I inject the http provider into the service?

score 2 · Accepted Answer · answered Feb 15 '16 at 15:43

In your action you can inject the Http in constructor and pass it into the service instance. Something like

export default class SampleAction {
    private _projectService;
    constructor(@Inject(Http) http: Http) {
        this._sampleService = new SampleService(http);
    }    
}

score 0 · Answer 2 · edited May 23 '17 at 12:17

In fact you don't need to instantiate the service by your own. Just inject the service into a component or another service. What is important is to have the provider configured for this execution flow. In your case, Http (and more generally HTTP_PROVIDERS) and SampleSampleService. Providers are defined for the whole application (at the bootstrap level) or for component (providers attribute).

bootstrap(AppComponent, [ HTTP_PROVIDERS, SampleService ]);

or

@Component({
  providers: [ HTTP_PROVIDERS, SampleService ]
})
export class SomeComponent {
  constructor(private action: SampleAction) {
  }

  executeAction() {
    this.action.doSomething();
  }
}

Here is the code you should use for your SampleAction class:

export default class SampleAction {
  constructor(private _projectService: SampleService) {
  }
}

You can notice that to be able to inject into a service, the @Injectable need to be used.

@Injectable()
export class SampleService {
  constructor(public http: Http) {}
}

This answer could give you more hints about the way to use dependency injection and how hierarchical injectors work in Angular2:

What's the best way to inject one service into another in angular 2 (Beta)?

Thanks for the help Thierry, but I am looking for a solution in which the component must not know about the service. — Sanjeev, Feb 15 '16 at 15:36
What do you exactly mean by "must not know about the service"? How would your component call the service? — Thierry Templier, Feb 15 '16 at 15:56
The component should dispatch an action like in flux/redux and the action then will use a middleware to call the service. — Sanjeev, Feb 16 '16 at 04:46

score 0 · Answer 3 · answered Feb 15 '16 at 13:48

Don't create a service instance using new SomeService().

Instead just add the classes to the providers of bootstrap(.., [Providers]) or the component that should be the root of the scope where a service instance should be shared.

Also add all dependencies (constructor arguments) to the providers list.

If all is set up correctly, everywhere where an instance is requested by a constructor argument, an instance with all dependencies automatically resolved is passed in.

Just configure DI and let it do the work for you.

Thanks for the help Gunter, but I am looking for a solution in which the component must not know about the service. — Sanjeev, Feb 15 '16 at 15:37

How to inject a provider in Angular 2 service from action?

3 Answers3