Injectable environment configuration in Angular 4
08 of June, 2017
Dependency Injection in Angular 4 (typescript) is frictionless and requires only minimal amount of boilerplate:
- Define an object injectable;
- Add it to list of providers;
- Everything else is happening behinds the scenes.
This has tons of examples on the net, and here’s one more:
SampleInjectable now can be used in other services or components (just type hint it in constructor and Angular will do the rest).
Injectable service, using environment configuration
The name is hardcoded though. Would be much better to make it configurable. Imagine it is dependent on environment.
Angular 4 provides all the infrastructure for defining such parameters, no reinvention of wheel is necessary:
This is much better. The hard dependency on environment is still a big flaw, would be much better to inject the string, instead of coupling object to app configuration. But how?
Injectable service, using injected environment configuration
Injectable parameters (scalar values) in Angular 4 are less magic then injectable objects and requires more code, but just a little bit. Here’s what needs to be done:
- Define custom token;
- Define provider mapping this token to scala value;
- Add it to list of app providers;
- Inject name via constructor dependency injection.
Is it worth it?
- The service is not tightly coupled on configuration anymore;
- Now can be unit tested easily and used outside of the app too;
- The amount of boilerplate code is minimal;
- You can define different name in
environments/environment.prod.ts, which may not make much sense in this example, but would be very useful when service in question is an api client with injected base url.
Alternative: value object with configuration
When there are many parameters in environment configuration, then making each injectable could quickly become quite repetitive. In that case it could be grouped into configuration value object and passed around like together instead.comments powered by Disqus