How to read appsettings.json file configuration in Angular 10

Question

I am developing a web application in Angular 10, wanted to access the appsettings.json file configurations in the Angular Home component.

This is the appsetting.json file configuration which I need to read.

 "Application": {
    "ServiceUrl": "http://localhost:6000/",
    "LogServiceURL": "http://localhost:6002/"
  }

Please help me to find out the best solution.

Answer 1

you can use the npm read-appsettings-json package.

install read-appsettings-json through npm package using the following command:

`npm install read-appsettings-json --save`

Import the "read-appsettings-json" whereever you want to read the appsetting.json file. In your case in home component.

import { AppConfiguration } from "read-appsettings-json";

Then just write below code to get value from appsetting.json file

let serviceURL=AppConfiguration.Setting().Application.ServiceUrl;

let logServiceURL=AppConfiguration.Setting().Application.LogServiceURL;

You can refer npm website .

Answer 2

import appSettings from '../path_to_json';

You can import any JSON or js file like this in Angular/Typescript. You can also get a package.json file as well like this.

you can also create an observable of file like this. but i think its not needed and over-complicated as all this is static data

this.http.get('/path/to/appsettings.json').subscribe(result => {
       this.data = result;
    });