Completely external constants in Angular 5 using some configuration file

I have got a following solution. It uses external JSON configuration file.

So first create a JSON in assets/data folder.


{ "serverPath": "" }

Then read and parse it.


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';

export class ConfigService {

  private configUrl = "assets/data/config.json";

  constructor(private http: HttpClient) {

  public getJSON(): Observable<any> {
    return this.http.get(this.configUrl)

  public getSavedServerPath(){
    return localStorage.getItem('serverPath');

In app.module.ts you need to import HttpClientModule so that this works.

Then you can save serverPath in LocalStorage in login component for example.


  constructor(public loginService:LoginService, public configService:ConfigService, private router: Router) {

  ngOnInit() {

    this.configService.getJSON().subscribe(data => {
      localStorage.setItem("serverPath", data["serverPath"]);


After that you can access serverPath in all your other services.


import {Injectable } from '@angular/core';
import {Headers, Http, Response} from '@angular/http';
import 'rxjs/Rx';
import {Observable} from 'rxjs/Observable';
import {ConfigService} from '../services/config.service';

export class ServerService {

  private serverPath:string;

  constructor(public configService: ConfigService, private http:Http) {
    this.serverPath = this.configService.getSavedServerPath();

After a build you will see assets/data/config.json file in your dist folder. Copy all your dist folder to your hosting and all works.