Angular2 providers

Question

I am not fully grasping providers and can't figure this one out. I have a class with a constructor as so: constructor(private http:Http, private url:string, private ext:string){}

Within the bootstrap how do I tell the DI to supply the Http but then use two variables: environment.url and environment.ext to supply the strings?

I know that I need to use providers but it wont accept the token string and I need to specify multiple times and only in the case of my class, not globally.

Note: I know I can just import environment.url and environment.ext within my class but I want to have those two parameters set via constructor to minimize dependencies.

set it on global level like at the time of bootstrap of your app ? — Pardeep Jain, Jul 27 '16 at 18:08
i mean like other PROVIDERS you also can set local variable and method globally so that this can be available throughout whole app. i hope you get it ? — Pardeep Jain, Jul 27 '16 at 18:26
No I am not. I dont want it to be injected or care from what object it comes from. I just want to be able to pass two strings into the constructor and save them. — ZaksBack, Jul 27 '16 at 18:49
Can you please just write an example? I dont understand what you are trying to say. — ZaksBack, Jul 27 '16 at 18:52
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/118469/discussion-between-zaksback-and-pardeep-jain). — ZaksBack, Jul 27 '16 at 19:26

score 0 · Answer 1 · answered Jul 27 '16 at 18:55

The simplest solution would probably be to wrap the two into a class and supply the class as a provider. Injecting strings is somewhat difficult (although possible). If you want to do that then read up on the section titled Non-class dependencies in the dependency injection guide.

Alternatively, if you want the path of least resistance.

//environment-config.ts
export class EnvironmentConfig {
    constructor(public url:string, ext:string);
}

//main.ts (or wherever you call bootstrap)
config:EnvironmentConfig = {url:"foo", ext:"bar"};
bootstrap(RootComponent, [ config, HTTP_PROVIDERS, disableDeprecatedForms(), provideForms()]);

//foo.component.ts
constructor(private http:Http, private config:EnvironmentConfig);

Also, note that many frameworks and seed projects (e.g. webpack starter project) have mechanisms for supplying environment configuration that changes between development & production and you may want to tie into that. There is no standard angular2 solution as far as I know. — Pace, Jul 27 '16 at 18:56

Angular2 providers

1 Answers1