One way to access a json file stored in assets is by using the required method 🤔

The path to the json file is /assets/urls.json 📄

{
  "urls": {
    "dev": "dev.com",
    "prod": "prod.com"
  }
}

In the env.ts file:

const { urls } = require("../assets/urls.json");

export const environment: IEnv = {
  production: false,
  baseUrl: urls.dev
};

And in the env.prod.ts file:

const { urls } = require("../assets/urls.json");
export const environment: IEnv = {
  production: true,
  baseUrl: urls.prod
};

🚨 In order to make this work, remember to install npm i @types/node and update your tsconfig.app.json as shown below

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["node"]
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

One solution is to define constants for each URL within the environment file. In this particular situation, there may not be a need to store them in a separate JSON file. When deploying to production, simply update the default configurations property in angular.json to use the same environment file.

If you want to read a Json file using HttpClient, one approach is to create a service for it.

export class SettingService  {

  constructor(private http: HttpClient) {

  }

  public getJSON(file): Observable<any> {
      return this.http.get("./assets/configs/" + file + ".json");
  }
  public getSetting(){
      // perform other actions with setting data here
  }
}

Instead of storing URLs in environment.ts and risking losing them on page refresh, consider saving them to session storage or local storage.

For more information, check out this Stack Overflow thread about reading a json file after building in Angular

    import { environment } from '../../../environments/environment';

    domain :string = environment.domain;

    if(!!environment) {
        if(environment.qa) {
          "url1": "https://jsonplaceholder.typicode.com/posts",
        }
        if(environment.dev) {
           "url2" : "https://reqres.in/api/users",
        } 
      }

Make sure to include the baseUrl property from the asset folder into your service file and follow the provided instructions for execution.

https://alligator.io/angular/environment-variables/

To gain a better understanding of environment variables in Angular, please refer to the URL above.

To streamline the process, I suggest creating a node script named populateDynamicUrls.js. This script will be responsible for extracting values from a JSON file and updating the environment.ts file accordingly based on the specific environment. After setting up the script, your angular build command can be simplified to:

node populateDynamicUrls.js && ng run build

. Similarly, for running the development server, you can use:

node populateDynamicUrls.js && ng run serve

To import a JSON file, follow these steps:

1. Place config.json in the assets folder.
2. Open the typings.d.ts file and add the following code:

    declare module "*.json" {
        const value: any;
        export default value;
    }

3. In your tsconfig.json, under "typeRoots", include the path to the typings.d.ts file:

"typeRoots": [
      "node_modules/@types", "./src/typings.d.ts"
],

4. Import the config.json into your environment file like this:

import * as config from '../assets/config.json';

export const environment = {
  baseUrl: config.default.url1,
  production: true
};

That's it! Best of luck!

After some tinkering, I found a solution that worked for me. My aim was to have an "API URL" available based on whether we were in Debug or Production mode.

To accomplish this, I made adjustments to two existing .ts files:

• src\environments\environment.prod.ts
• src\environments\environment.ts

Each file now had a configuration setting like the following:

export const environment = {
  production: false,
  apiUrl: "http://localhost:53104"
};

The main.ts file already handled reading the environment object and using environment.production. I simply added code to also handle environment.apiUrl:

export function getAPIUrl() {
  console.log("API URL: " + environment.apiUrl);
  return environment.apiUrl;
}

const providers = [
  { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] },
  { provide: 'API_URL', useFactory: getAPIUrl, deps: [] }
];

. . .

platformBrowserDynamic(providers).bootstrapModule(AppModule)
   .catch(err => console.log(err));

This setup allowed me to access the "API_URL" value in my components, such as in the example below:

export class FetchDataComponent {
  public forecasts: WeatherForecast[];

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string, @Inject('API_URL') APIUrl: string) {
    http.get<WeatherForecast[]>(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result => {
      this.forecasts = result;
    }, error => console.error(error));

    console.log("FetchDataComponent, URL: " + APIUrl);
  }
}

Upon checking the Output window, I could see my URL displayed when the page loaded.

FetchDataComponent, URL: http://localhost:53104

It felt like a simple yet effective approach with minimal additional code compared to other solutions I came across.

Alternatively, one could skip the "API_URL" provider altogether and directly import the environment variable in components:

import { environment } from '../../environments/environment';

Then accessing the value is straightforward:

console.log("FetchData, URL: " + environment.apiUrl);  

Problem solved!