ngx-envconfig

ngx-envconfig

Configuration utility for Angular app.

Features

• Configure the project for staging, development and production environments, by taking advantage of Angular environment variables.
• Initializ configuration, before whole application initialization process complete
• Simplified methods for getting back-end API endpoints

Installation

npm install ngx-envconfig --save

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
{
  "HOST_API": "http://development.server.com', <-- suppose this is your development server  
  "API_ENDPOINTS": {
    "USER": "/api/v1/user",
    ...
  }
}

// src/assets/config/staging.json
{
  "HOST_API": "http://staging.server.com', <-- suppose this is your staging server  
  "API_ENDPOINTS": {
    "USER": "/api/v1/user",
    ...
  }
}

// src/assets/config/production.json
{
  "HOST_API": "http://producton.server.com', <-- suppose this is your production server  
  "API_ENDPOINTS": {
    "USER": "/api/v1/user",
    ...
  }
}

Usage

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { ConfigModule, ConfigService } from './config/config.service';

@NgModule({
    imports: [
        ConfigModule.forRoot({state: 'development'})
        ...
    ],
    providers: [
        ...
        Your Providers
        ...
    ]
})

export class AppModule { }

// src/app/app.component.ts
import { Component } from '@angular/core';

import { ConfigService } from 'ngx-envconfig';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private configService: ConfigService){
      console.log(configService.get('HOST_API'))
      // prints: http://development.server.com
  }
}

Using with Angular environment variables

• Add the following snippet to .angular-cli.json file.

  "environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
      "staging": "environments/environment.staging.ts"
    }
  

• Create the following files under /environments folder.

  // ./environments/environment.prod.ts
  export const environment = {
      state: 'production'
  };
  

  // ./environments/environment.staging.ts
  export const environment = {
      state: 'staging'
  };
  

  // ./environments/environment.development.ts
  export const environment = {
      state: 'development'
  };
  

• Then you can add environment value to ConfigModule like this:

      // src/app/app.module.ts
      import { NgModule } from '@angular/core';
      import { ConfigModule, ConfigService } from './config/config.service';
  
      import { environment } from '../src/environments/environment'; // <-- add this line
  
      @NgModule({
          imports: [
              ConfigModule.forRoot(environment) // <-- pass environment variable
              ...
          ],
          providers: [
              ...
              Your Providers
              ...
          ]
      })
  
      export class AppModule { }
  

Based on the provided state value in environment.*.ts file it will load the approprate *.json config file. Once the configuration *.json file is loaded, the Angular will bootstrap the app.

Build Environments (if you use env variables option)

• ng build --env=dev builds for development environment. This is default if you don't specify.
• ng build --env=staging builds for staging environment.
• ng build --env=prod builds for production environment.

ConfigService

• get(propertyName: string): any. Returns the corresponding value of the provided property propertyName config file.
• getEnv(): string. Returns the current environment
• isDevMode(): boolean. Returns true if environment is development, otherwhise false
• getApi(endpoint: string): string. Return 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.