Angular2: How to provide an Injectable service through a provider

Question

so I have this class called StoreService :

import {Injectable} from "angular2/core";
import {BusinessAction} from "../business/BusinessAction";
import {AppStore} from "angular2-redux-util/dist/index";

@Injectable()
export class StoreService {
    constructor(private appStore:AppStore, private businessActions:BusinessAction) {
        this.appStore.dispatch(this.businessActions.fetchBusinesses());
    }
}

And other components dependency inject this class "StoreService". However these components that inject StoreService complain that there is no provider for BusinessAction.

Now sure, I can provide BusinessAction to them via providers:[BusinssAction] or even do it at the main bootstrap provider(... and all is well....

BUT, I don't want to as only StoreService should know and care about BusinessAction, is there no way to tell the Injectors to pickup the instance of BusinessAction from StoreService which is the only class that's using BusinessAction anyways?

tx

Sean

Answer 1

You need to add BusinessAction to the providers list in bootstrap(AppComponent, [OtherProviders, StoreService, BusinessAction])

See also https://github.com/angular/angular/issues/5622

Answer 2

The provider for the BusinessAction class must be visible from the injector of the component that executes the processing. I mean: SomeComponent -> StoreService -> BusinessAction.

Günter is right! Putting the provider when bootstrapping your main component will work. In this case, the service will be usable across all the application. If you want to specify only the SomeComponent, put it within its providers attribute:

@Component({
  (...)
  providers: [ StoreService, BusinessAction ]
})
export class SomeComponent {
}

You can also define it in a parent component if any...

I think this answer could help you to understand how dependency injection works in Angular2:

• Angular2 - inject into @Injectable