ngx-envconfig
Configuration utility for Angular app based on the environment variables.
Using JSON files configure your Angular app like a BOSS!
Specify a list of API endpoints in the JSON and get them in your code with ease.
Look how beautiful is your code 😊
Configuring your app for each environment be like:
Did you like it? Please put a Github star to support.
Table of contents:
-
4.1 ConfigModule
4.2 ConfigService
-
5.1 Setting up configuration files
Features
- Configure the project for staging, development and production environments, by taking advantage of Angular environment variables.
- Fallback to default (development.json) configuration if there is no match in production/staging configuration.
- Initializ configuration, before whole application initialization process complete
- Simplified methods for getting back-end API endpoints
Installation
npm install ngx-envconfig --save
Build Environments
ng build --configuration=staging
builds for staging environment. For older versionsng build --env=staging
ng build --configuration=production
builds for production environment. For older versionsng build --env=prod
Getting Started
Setting up configuration files
- Create
/config
folder under/assets
directory - Create the following config files for the appropriate environment under
/assets/config
folder.
// src/assets/config/development.json
// src/assets/config/staging.json
// src/assets/config/production.json
Usage without Angular environment variables
// src/app/app.module.ts;; @
// src/app/app.component.ts; ; @ { console // prints: http://development.server.com console // prints: http://development.server.com/api/v1/users // prints: http://production.server.com/api/v1/users if the state is production }
Usage with Angular environment variables
-
Add staging configurations in
angular.json
file. Make sure production configuration is added. Default one we assume is the development configuration, which is points toenvironment.ts
file...."projects": -
If you have older version of Anuglar then make the updates in
.angular-cli.json
file as follows:"environmentSource": "environments/environment.ts","environments": -
Create the following files under
/environments
folder.// ./environments/environment.prod.tsconst environment =state: 'production';// ./environments/environment.staging.tsconst environment =state: 'staging';// ./environments/environment.tsconst environment =state: 'development'; -
Then you can add environment value to
ConfigModule
like this:// src/app/app.module.ts;;; // <-- add this line@// src/app/app.component.ts;;@{console// prints: http://development.server.com// prints: http://production.server.com if the state is productionconsole// prints: http://development.server.com/api/v1/users// prints: http://production.server.com/api/v1/users if the state is production}
API Reference
ConfigModule
- .forRoot(envConfig: EnvConfig) Based on the provided
envConfig.state
value, it will load the approprate*.json
config file. It assumes that configuration json files are located under./src/assets/config
folder. Angular will bootstrap the app, only after the configuration*.json
file is loaded.
EnvConfig
- .state: string Specifies the environment. For instane if it's equalt to
'development'
then will loaddevelopment.json
file from./src/assets/config
folder - .fallbackDev: boolean = false Indicates whether to get the value from
development.json
configuration if there is no match in the specified environment. For instance if"SOME_KEY"
does not exist inproduction.json
then it will return the value of"SOME_KEY"
fromdevelopment.json
, if"SOME_KEY"
value does existdevelopment.json
file.
ConfigService
- .get(propertyName: string): any. Returns the corresponding value of the provided property
propertyName
config file.{console// prints: 'http://development.server.com' in development mode} - .getEnv(): string. Returns the current environment{console// prints: 'development' in development mode}
- .isDevMode(): boolean. Returns
true
if environment is development, otherwhisefalse
{console// prints: true in development mode} - .getApi(endpoint: string): string. This function will only work if you have provided
"API_ENDPOINTS"
object in cofig file, which provides the list of available API endpoints and"HOST_API"
which is the API's host URL. Returns API endpoint from"API_ENDPOINTS"
by concatenating it with"HOST_API"
.{console// prints: 'http://development.server.com/api/v1/user' in development mode} - .onLoad: AsyncSubject boolean. Async subject to be subscribed. Emits when the config file is already loaded.{thisconfigonLoad}