angularangular8dynamic-import

Load json dynamically in Angular 8


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.


Solution

  •  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)});