Getting environment variable from JSON file within Angular 4 - a step-by-step guide

Question

Getting environment variable from JSON file within Angular 4 - a step-by-step guide

I have a file named "appsettings.json" which contains configurations for a specific purpose. I want to include variables from both "environment.ts" and "environment.prod.ts" in this file and access them within the environment files.

When I attempt to import/require "appsettings.json" and use its values, it works in development mode but not in "--prod" mode with aot enabled. However, it works fine with "--prod --aot=false" enabled.

An error is being thrown: ERROR in Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol 'json'. Consider exporting the symbol (position 3:5 in the original .ts file), resolving symbol CONFIG

 "ExtraConf" : {
    "CDNPATH": "https://share-dev-cdn.test.net/",
    "ICONPATH":"skin/icons/",
    "APPLTITLE":"Title"
  },
  "Environments" : {
    "production": false,
    "appInsights": {
        "appkey":"0908776554"
    }
  },
  "EnvironmentsProd" : {
    "production": true,
     "appInsights": {
         "appkey":"55678900"
    }
  }


environment.ts
declare var require: any;

var json:any = require("../../appsettings.json");

export const environment = json.Environments;

angular typescript webpack

Answer 1

Answer №1

One possible approach to consider is outlined below:

1: Initialize ConfigLoaderService:

@Injectable({
  providedIn: 'root'
})
export class ConfigLoaderService {

  private config: Config;

  constructor(private http: HttpClient) {
    this.config = new Config();
  }

  public getConfigData(): Config {
    return this.config;
  }

  load(): Promise<any> {
    console.log(`getSettings:: before http.get call`);
    const promise = this.http.get('../assets/myconfig.json', HttpOptions)
      .toPromise()
      .then((settings: Config) => {
        this.config = settings;
        return settings;
      });

    return promise;
  }
}

The ConfigLoaderService is responsible for loading settings from a JSON file during app startup.

2: ConfigModel:

export class Config {
    [name: string]: any;
}

This is a versatile class designed to interpret JSON data as key-value pairs.

3: AppModule:

... Relevant imports ...
export function configProviderFactory(provider: ConfigLoaderService) {
  return () => provider.load();
}
@NgModule({
.... Additional imports and declarations...
providers: [
{ provide: APP_INITIALIZER, useFactory: configProviderFactory, deps: [ConfigLoaderService], multi: true },


.... Other providers ....
  ],

By declaring this in the AppModule, Angular is informed to execute the configLoaderService on app initialization, fetching and populating the config class for use throughout the application. Thus, access to the models is facilitated.

export class MyComponent implements OnInit {

  private config: Config;

  constructor(
    configLoader: ConfigLoaderService,

  ) {

    this.config = configLoader.getConfigData();

  }

  ngOnInit() {
    console.log(this.config['MY_URL']);
    console.log(this.config.MY_URL);
  }

Note: Compatibility is assured for NG5+, with an adjustment required for Ng4 due to the httpClient import.

Answer 2

One possible approach to consider is outlined below:

1: Initialize ConfigLoaderService:

@Injectable({
  providedIn: 'root'
})
export class ConfigLoaderService {

  private config: Config;

  constructor(private http: HttpClient) {
    this.config = new Config();
  }

  public getConfigData(): Config {
    return this.config;
  }

  load(): Promise<any> {
    console.log(`getSettings:: before http.get call`);
    const promise = this.http.get('../assets/myconfig.json', HttpOptions)
      .toPromise()
      .then((settings: Config) => {
        this.config = settings;
        return settings;
      });

    return promise;
  }
}

The ConfigLoaderService is responsible for loading settings from a JSON file during app startup.

2: ConfigModel:

export class Config {
    [name: string]: any;
}

This is a versatile class designed to interpret JSON data as key-value pairs.

3: AppModule:

... Relevant imports ...
export function configProviderFactory(provider: ConfigLoaderService) {
  return () => provider.load();
}
@NgModule({
.... Additional imports and declarations...
providers: [
{ provide: APP_INITIALIZER, useFactory: configProviderFactory, deps: [ConfigLoaderService], multi: true },


.... Other providers ....
  ],

By declaring this in the AppModule, Angular is informed to execute the configLoaderService on app initialization, fetching and populating the config class for use throughout the application. Thus, access to the models is facilitated.

export class MyComponent implements OnInit {

  private config: Config;

  constructor(
    configLoader: ConfigLoaderService,

  ) {

    this.config = configLoader.getConfigData();

  }

  ngOnInit() {
    console.log(this.config['MY_URL']);
    console.log(this.config.MY_URL);
  }

Note: Compatibility is assured for NG5+, with an adjustment required for Ng4 due to the httpClient import.

Answer 3

Answer №2

Instead of generating a .json file, consider creating an appsettings.js file to export the JSON configuration.

    //appsettings.js file
    configValue = {
    "ExtraConf": {
        "CDNPATH": "https://share-dev-cdn.test.net/",
        "ICONPATH": "skin/icons/",
        "APPLTITLE": "Title"
    },
    "Environments": {
        "production": false,
        "appInsights": {
            "appkey": "0908776554"
        }
    },
    "EnvironmentsProd": {
        "production": true,
        "appInsights": {
            "appkey": "55678900"
        }
    }
}
exports.configValue = configValue;

Next, import the appsettings.js file into the environment.ts file to access the configuration.

import * as config from './appsettings.js';

export const environment = configValue.Environments;

For Production, follow this approach. //environment.prod.ts import * as config from './appsettings.js';

export const environment = configValue.EnvironmentsProd;

Note: Ensure that appsettings.js, environment.ts, and environment.prod.ts are located in the same folder. Otherwise, adjust the import paths accordingly.

Answer 4

Instead of generating a .json file, consider creating an appsettings.js file to export the JSON configuration.

    //appsettings.js file
    configValue = {
    "ExtraConf": {
        "CDNPATH": "https://share-dev-cdn.test.net/",
        "ICONPATH": "skin/icons/",
        "APPLTITLE": "Title"
    },
    "Environments": {
        "production": false,
        "appInsights": {
            "appkey": "0908776554"
        }
    },
    "EnvironmentsProd": {
        "production": true,
        "appInsights": {
            "appkey": "55678900"
        }
    }
}
exports.configValue = configValue;

Next, import the appsettings.js file into the environment.ts file to access the configuration.

import * as config from './appsettings.js';

export const environment = configValue.Environments;

For Production, follow this approach. //environment.prod.ts import * as config from './appsettings.js';

export const environment = configValue.EnvironmentsProd;

Note: Ensure that appsettings.js, environment.ts, and environment.prod.ts are located in the same folder. Otherwise, adjust the import paths accordingly.

Getting environment variable from JSON file within Angular 4 - a step-by-step guide

Answer №1

Answer №2

Similar questions

Ways to detect button click in a separate component

Guide to sending a request to a third-party API using Node.js and Express.js with the 'Authorization: Basic' header

Exploring the Power of Modules in NestJS

Issues with Angular2 causing function to not run as expected

SCORM-compliant Angular web application bundle

Using Symbol.iterator in Typescript: A step-by-step guide

Encountering a hiccup while trying to install Svelte, Skeleton, and Tail

The function is missing a closing return statement and the return type does not specify 'undefined'

What is the best way to convert an HTML table into an array of objects?

It appears that Spring Boot is not making a custom header visible to my frontend application

What is the best way to insert an item into a tree structure when determining the appropriate level for insertion is necessary beforehand?

Having trouble showing table data in Angular

Unable to utilize the Object.values method with an object in TypeScript

The type 'MouseEvent<HTMLButtonElement, MouseEvent>' cannot be matched with the type 'boolean'

Moving the marker does not update the address

TypeScript generic types allow you to create reusable components that

When working in VScode, there may be difficulty in locating project-specific imports for `tsx` files. However, the TypeScript compiler is able to locate

Issues encountered when utilizing a computed property in Typescript to organize an array

Updates to TypeScript 2.3.1 creating disruptions in SystemJS plunk

Exploring the Nested JSON Data Loop with *ngFor in Angular 5/4