How do i read the config files entries in angular 2?

Question

I need to read the config file which is in a json format. the json file contains config entries in key/pair values. How do I get the values of any particular key?

My question is, I can read the json file on a whole using http.get() or any other way, but how do i get a particular config value based on a key? should i need to loop thru/iterate the items to get the required item or is there any other better ways to do it?

my json config looks like below

{
  "SecurityService": "http://localhost/SecurityAPI",
  "CacheService": "http://localhost/CacheServiceAPI"
}

I tried do the code changes as per your suggestion The code to read the config data from the json file

getConfiguration = (): Observable<Response> => {
        return this.http.get('config.json').map(res => res.json());
    }

following code to invoke the above method from the calling component and use the read config values

this._ConfigurationService.getConfiguration()
            .subscribe(
            (res) => {
                this.configs = res;
                console.log(this.configs);
            },
            (error) => console.log("error : " + error),
            () => console.log('Error in GetApplication in Login : ' + Error)
        );

But when the above is getting executed, I am getting the error as

"error : SyntaxError: Unexpected token < in JSON at position 0"

what is the mistake I am doing here, the same code to read the json file works in other scenarios where I need to read data from json and bind the grid etc.

I have tried reproducing the issue in plunkr https://plnkr.co/edit/rq9uIxcFJUlxSebO2Ihz?p=preview

Answer 1

"Reading" a config file is not different from reading any other object in js. For example, create a config variable:

export var config = {
  title: "Hello World",
  "SecurityService":"http://localhost/SecurityAPI",
  "CacheService":"http://localhost/CacheServiceAPI"
}

and then import it to your component to use it like this:

import { Component, Input } from '@angular/core';
import { config } from './config';

@Component({
  selector: 'my-app',
  template: `{{myTitle}}<br>{{security}}<br> {{cache}}`,
  directives: []
})
export class AppComponent {
    myTitle = config.title;
    security = config.SecurityService;
    cache = config.CacheService;

}

Full example: https://plnkr.co/edit/CGtxYJkcjYt2cEzrbL00?p=preview