Environment Specific File in Angular 2+

If you are using angular CLI then you'll have two file environment.ts and environment.prod.ts. You can user these files to store your constants. In normal build environment.ts is used. But when you create build with

ng build --prod

environment.prod.ts will be used in this case

For config files I found a tutorial long time ago (but works with ".json" files)

import { Inject, Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';


@Injectable()
export class ArchConfigurationService {
    private config: Object = null;
    private env:    Object = null;

  constructor (
    private http: Http,
  ) { }

    /**
    * Permite recuperar una propiedad en concreto.
    * Normalmente será una string, pero tambien puede ser un objeto
    * @param key La propiedad a buscar en la configuración.
    */
    public getProperty(key: string): any {
        return this.config[key];
    }

    /**
     * Obtain the env.
     */
    public getEnv(): string {
        return this.env['env'];
    }

    /**
     * Loads the "env.json" to obtain the env (Ej: 'production', 'development' )
     *  Then for this env loads the "[env].config.json"  (Ej: 'development.config.json')
     */
    public load() {
        return new Promise((resolve, reject) => {
            this.http.get('./enviroments/env.json')
            .map( res => res.json() )
            .catch((error: any):any => {
                console.log('Configuration file "env.json" could not be read');
                resolve(true);
                return Observable.throw(error || 'Server error');
            }).subscribe( (envResponse) => {
                this.env = envResponse;
                let request:any = null;
                let enviro = this.getEnv();
                switch (enviro) {
                    case 'production': 
                        request = this.http.get('/enviroments/' + enviro + '.config.json');
                    break;

                    case 'development': 
                        request = this.http.get('./enviroments/' + enviro + '.config.json');
                    break;

                    default: 
                        console.error('Environment file is not set or invalid');
                        resolve(true);
                    break;
                }
                if (request) {
                    request
                        .map( (res: any) => res.json() )
                        .catch((error: any) => {
                            console.error('Error reading ' + enviro + ' configuration file');
                            resolve(error);
                            return Observable.throw(error || 'Server error');
                        })
                        .subscribe((responseData: any) => {
                            this.config = responseData;
                            resolve(true);
                        });
                } else {
                    console.error('Env config file "env.json" is not valid');
                    resolve(true);
                }
            });

        });
    }
  }

The env.json

{
  "env": "development"
}

And the development.config.json

{
   "url": ...
}

And if you want to use in the app load (otherwise use "load")

import { ArchConfigurationService } from './services/arch.configuration.service';

providers: [
    ArchConfigurationService,
    { provide: APP_INITIALIZER, useFactory: (config: ArchConfigurationService) => () => config.load(), deps: [ArchConfigurationService], multi: true },
 ...