Introduction of Environment file In Angular2

In Angular2 applications, Setting up the configuration is a piece of almost every undertaking project. The recent framework enables you to manage configuration which is shared the overall environment and which is separate for each environment, as for "production", "development"  and vice versa. Node.js as of now gives a perfect mechanism to read JSON records, you can just require the JSON config files. I have tried to make the environment files separately for a different environment in my application.

I am seperating this tutorial into three parts.
(1) Setting up:- config class and json files to load these files.
(2) Pre-loading:- By making a custom router outlet.
(3) Usage:- In config file of the application.

1. Setting Up:-
This starts by making a config folder in app directory or we can make a seperate environment file. In my case, it is like /src/environment. Inside it, I created three environment files seperatly for local, development and production which will hold the current environment and shareable configuration. for e.g.
{
"env": "local"
}
for development
{
"env": "dev"
}
for prod
{
"env": "prod"
}
config class:- In the next step, a file named config.ts is created in the same folder. I am using angular2 typescript so that's why it's extension is  '.ts'. This file will be used in two ways, one for load the required files and second to retreive the config variables.

import { Injectable } from ‘angular2/core’;
@Injectable()
 export class Config {
 private _config: Object
 private _env: Object
 constructor(private http: Http) {
 }
 load() {
   // json files will be loaded here
 }
 getEnv(key: any) {
   return this._env[key];
 }
 get(key: any) {
   return this._config[key];
 }
};

There are two particular properties _config and _env. What's more, two open methods getEnv() and get(). The reason is, all shareable setup i.e. 'env.json' information will be held in _env object and env specific data will be in _config property, which at that point will be called by their correspondant methods.
After that we will write the code to load the required files, so we are using angular2's built-in 'http' module to load the json files.
Since in angular2 application http calls return an observable object rather than a promise, we are using this module to throw an error. So let's define our load() method.

load() {
 return new Promise((resolve, reject) => {
   this.http.get(‘src/app/config/env.json’)
   .map(res => res.json())
   .subscribe((env_data) => {
     this._env = env_data;
     this.http.get(‘src/app/config/’ + env_data.env + ‘.json’)
     .map(res => res.json())
     .catch((error: any) => {
       console.error(error);
       return Observable.throw(error.json().error || ‘Server error’);
     })
     .subscribe((data) => {
       this._config = data;
       resolve(true);
     });
   });
 });
}

In the above code, we are making two requests one after another; one to load env.json and second to load the required environment .json file.
2. Pre-loading:-
Actually what we want, is to load the required config files before any of the components is initialized including our main app component which is used for bootstrap and to make sure all the config is available as a service across the application.
There is different solution to achieve this solution.
Load files inside bootstrap().then() function. 
Load files in a part's @CanActivate explanation. 
Utilize custom RouterOutlet which will stack the records before course actuation
Let's go deep in the working of each solution.
The issue in the first solution is that the bootstrap is settled after the AppComponent's ngOnInit() and constructor() function get executed, along these lines not making config being accessible in your AppComponent. You may be thought that why don't we call the load() method in either ngOnInit or construction methods for AppComponent? Because when we do this the other component's constructor method is also called which we actually want to restrict.

3. Usage:-
Usage is very simple and easy,let's make a sample component.

import {Config} from ‘../config/config’;
@Component({
 selector: ‘sample’
})
export class SampleComponent {
  constructor(private _config: Config) {
    var url = _config.get('apiUrl')
    console.log(url)
    var env = _config.getEnv('env')
    console.log(env)
  }
}

1. we can use cache to store and read config files otherwise http requests in angular have built-in cache by default. 
2. config class can be used as a registry, simply create a getter and setter methods.