Configuration Driven Angular Application
The article explains how to make the environment object injectable throughout your Angular application as well as in your publishable libraries installed via the npm package installer.
Angular is one of the most popular and opinionated frameworks developed by the folks at Google. Angular comes with a powerful CLI that can create and scaffold a “Hello World” application in minutes. Publishable libraries can be created just as easily.
Get VN’s stories in your inbox
Join Medium for free to get updates from this writer.
However, if you create your application with the CLI, there is not an easy way to pass the environment object around with ease unless it is imported via the file path wherever it is needed.
What if there was an easier way to inject the environment options via the constructor? Luckily it is possible to do this by using Angular’s InjectionToken.
Now that we have a configuration token and an injectable options service, let’s enable them via the app.module.ts in the app folder.
We just need to make the APP_CFG token available via the main application module file. Note that we don’t need to provide the CfgService as it already specifies the { providedIn: ‘root’ } as its option.
Now, we can just inject the CfgService in any Components, Directives, Pipes, Services and Interceptors and have them access application-level configuration options directly and with ease. Let’s look at the app.component.ts file again, but this time we will be using our brand new CfgService.
We can also create a CfgModule and turn this into a full-fledged publishable configuration module. Or we can simply use @nwx/cfg that takes care of your configuration needs with ease. This Angular library can also fetch remote configuration file prior to bootstrapping your application. This way your Angular application can be compiled once and run in all environment. A true Configuration Driven Angular Application indeed!.
