Load json dynamically in Angular 8

Question

So I have to load a value from a configuration json file in my Angular 8 app.

In the beginning I was loading it statically and so when the js was minified - the unset value from the json was read once and never again.

Then I tried to load it dynamically like so:

app.component.ts:

ngOnInit(): void {
    let appInfo = "";
    import("../assets/config/config.json").then(config => {
       appInfo = config.appInfo;
    });
    //using appInfo here - empty string.
}

Well that didn't work out either. Again it was unset. But it is actually present in my config.json..

Anyone have an idea on another approach I can try?

Edit: I want to access this on ngOnInit of my app.component.ts. My case is that before app startup someone will update the appInfo value in the config.json. I want to access it at startup. Also thank you all for the suggestions, I will try them out and update which ones work.

**** EDIT: None of the dynamic loading techniques worked for me. I ended up doing it with a http call although I tried all possible to avoid it.

Answer 1

 ngOnInit(): void {
    let appInfo = "";
    this.getDataHttp('../assets/config/config.json').subscribe(
      data => {
        var testResponse = data;
        console.log("I CANT SEE DATA HERE: ", testResponse);
      }
  )
}

get call for file, file can be any ware in other server or local

getDataHttp(url:string) {

    return this.http.get(url);
}

subscription of that call

OR

you can also apply es 2020 dynamic import natively

var  moduleSpecifier = '../assets/config/config.json'
  import(moduleSpecifier).then((data) => {       
     let temp=data
    }).catch(error =>{debugger;alert(error.message)});