Styjun

I want to import a json file which is in assets folder where I have below urls:

config.json

 
 "url1": "https://jsonplaceholder.typicode.com/posts",

 "url2" : "https://reqres.in/api/users",

 "url3":"https://fakerestapi.azurewebsites.net/api/Authors"
 

so instead hard coding the url, I want to import from json file but I am not sure how to do that exactly

any suggestions or scenarios would be appreciated below are my issues

1. How to import json file to environment.ts and from there i will have a service which consumes the api




2. If I import the file it needs to be same for prod and loc dev also

what i want : I have a config file where it contains some urls in .json file stored in asset folder now instead of loading environments.prod or .ts i want to load my json file config and basing on that i want run my application

what i did

below is my json file which I placed in asset folder

 
 "baseUrl": "https://jsonplaceholder.typicode.com/",
 "baseUrl2": "https://reqres.in/api/users"
 

ConfigServiceService.ts for storing config file

 public _config: Object;

 constructor(public http:Http) 

 getData()
 debugger;
 return this.http.get("./assets/config.json").pipe(map(res => res.json()));
 

after this I create a ServiceProviderService.ts for calling the service file

 configData:any;


 constructor(public http:Http,public config:ConfigServiceService) 

 

 jsonData()
 debugger;
 return this.configData;
 

 ngOnInit()
 debugger;
 this.config.getData().subscribe(res =>
 console.log(res);
 this.configData = res;
 );


 

app.component.ts

 title = 'sample';
 constructor(public serv :ServiceProviderService)
 this.serv.jsonData();
 

I am not able to get the json data and if I am putting the logic which is there is ngOnInit in ServiceProviderService.ts file if I put it in constructor then I am getting undefined.

note : here if there are more than once url then each url is distributed to various seperate service file suppose base1 url for 1 service file ans base2 url for another file how can I achieve that

https://stackblitz.com/edit/read-local-json-file-5zashx

in app.component.ts im getting undefined

Because you have static strings in a JSON, which is already in /assets, it's not on the server, you don't need http.get, just import the file wherever you need, even in environment.ts.

JSON:

export const URLS = Object(

 "url1": "https://jsonplaceholder.typicode.com/posts",

 "url2" : "https://reqres.in/api/users",

 "url3":"https://fakerestapi.azurewebsites.net/api/Authors"
 )

Then anywhere:

import URLS from 'assets/config.ts';

....

this.url1 = URLS.url1;

//or

let url1 = URL.url1;

Now this.url1 can be used in any api call inside http.get, for example:

 this.http.get(`$this.url1`, headers: this.getHeaders(token) );

or

 this.http.get(`$url1`, headers: this.getHeaders(token) ) // where url1 could be a variable or method parameter, etc...

That's it

You can create constants for all these urls in environment file. I do not see a scenario in your case to put it in a separate json file. For prod, you can use the same environment file by changing default configurations property in angular.json

You can create a service to read Json file using HttpClient

export class SettingService 

 constructor(private http: HttpClient) 

 

 public getJSON(file): Observable<any> 
 return this.http.get("./assets/configs/" + file + ".json");
 
 public getSetting()
 // use setting here
 

You should save 3 url to session storage or localstorage instead of enviroment.ts incase you refresh page

Refer Angular: Is it possible to read a json file after building

 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",
 
 

you can import the baseUrl property in the asset folder to your service file and execute as I mentioned above.

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

Please find the url for detailed explanation of environment variables in angular

So, I would create a node script called populatedDynamicUrls.js that can read those values IN from the json file, and write those values OUT to the corresponding environment.ts file for that specific environment. THEN your angular build command would look like this: node populateDynamicUrls.js && ng run build, and your angular serve command would look like this: node populateDynamicUrls.js && ng run serve