title: How to import .json config to environment.ts and consume api using Angular?
body: <p>I want to import a Json file which is in assets folder where I have below urls:</p>
  <p><strong>config.json:</strong></p>
  <pre><code>{
      &quot;url1&quot;: &quot;https://jsonplaceholder.typicode.com/posts&quot;,
      
      &quot;url2&quot; : &quot;https://reqres.in/api/users&quot;,
      
      &quot;url3&quot;:&quot;https://fakerestapi.azurewebsites.net/api/Authors&quot;
  }
  </code></pre>
  <p>So instead of hard coding the URL, I want to import from Json file, but I am not sure how to do that exactly.</p>
  <p>Any suggestions or scenarios would be appreciated, below are my issues:</p>
  <p><strong>1.</strong> How to import Json file to <code>environment.ts</code>  and from there I will have a service which consumes the api</p>
  <p><strong>2.</strong> If I import the file, it needs to be the same for prod and loc <code>dev</code> also</p>
  <p><strong>what I want</strong> :</p>
  <p>I have a config file where it contains some URL's in <code>.json</code> file stored in asset folder now  instead of loading <code>environments.prod</code> or <code>.ts</code>, I want to load my Json file config and basing on that I want to run my application</p>
  <p><strong>what I did:</strong></p>
  <p>Below is my Json file  which I placed in asset folder</p>
  <pre><code>{
      &quot;baseUrl&quot;: &quot;https://jsonplaceholder.typicode.com/&quot;,
      &quot;baseUrl2&quot;: &quot;https://reqres.in/api/users&quot;
  }
  </code></pre>
  <p><strong>ConfigServiceService.ts</strong>  for storing config file</p>
  <pre><code>public _config: Object;
  
      constructor(public http:Http) { }
      
      getData(){
         debugger;
         return this.http.get(&quot;./assets/config.json&quot;).pipe(map(res =&gt;  res.json()));
      }
  </code></pre>
  <p>After this, I create a  <strong>ServiceProviderService.ts</strong> for calling the service file</p>
  <pre><code>configData:any;
  
  
     constructor(public http:Http,public config:ConfigServiceService) {
      
     }
      
     jsonData(){
         debugger;
         return this.configData;
     }
      
     ngOnInit(){
        debugger;
        this.config.getData().subscribe(res =&gt;{
           console.log(res);
           this.configData = res;
        });
      
      
     }
  </code></pre>
  <p><strong>app.component.ts</strong></p>
  <pre><code> title = 'sample';
   constructor(public serv :ServiceProviderService){
        this.serv.jsonData();
   }
  </code></pre>
  <p>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.</p>
  <p><strong>Note :</strong> 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</p>
  <p><a href="https://stackblitz.com/edit/read-local-json-file-5zashx" rel="nofollow noreferrer">https://stackblitz.com/edit/read-local-json-file-5zashx</a></p>
  <p>in app.component.ts im getting undefined</p>
  <p><a href="https://i.stack.imgur.com/XnUMa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XnUMa.png" alt="enter image description here" /></a></p>