Angular editable config












1














I need to make a config file which can be modified after app build. I'm trying to follow this guide



Now I have config-init.service.ts



import { Injectable } from '@angular/core';
import { Response } from "@angular/http";
import { UriConfig } from "../shared/models/uri-config.model";
import { HttpClient } from "@angular/common/http";

@Injectable({
providedIn: 'root'
})
export class ConfigInitService {

static settings: UriConfig;

load(): Promise<void> {
const file = 'assets/config/uris.json';
return new Promise<void>((resolve, reject) => {
this.http.get(file).toPromise().then((response: Response) => {
ConfigInitService.settings = <UriConfig>response.json();
console.log('Loading config');
resolve();
}).catch((err: any) => {
reject(`Could not load file "${file}": ${JSON.stringify(err)}`);
});
});
}

constructor(
private http: HttpClient
) {
}
}


In App module



providers: [
...
ConfigInitService,
{
provide: APP_INITIALIZER,
useFactory: () => initializeApp,
deps: [ConfigInitService],
multi: true
}
]
})
export class AppModule {
}

export function initializeApp(uriConfig: ConfigInitService) {
console.log('app init');
return () => uriConfig.load();
}


According to console the factory is being used when app inits, however there is no console message from load function as well ass no working service which depends on these settings.










share|improve this question






















  • If you check in the network tab of the browser developer tools, can you it making a request for that file?
    – user184994
    Nov 12 '18 at 8:16










  • load function even is not invoced ever
    – Sergey
    Nov 12 '18 at 8:28










  • Check the answer below, that should solve your problem
    – user184994
    Nov 12 '18 at 8:30










  • Load function is not call but do 'app init' appear in your console? It can help to see when the problem occur, if the 'app init' is not call then you have a problem inside your App Module, if it appear then it's inside your Load method where the problem lies.
    – Max
    Nov 12 '18 at 9:03
















1














I need to make a config file which can be modified after app build. I'm trying to follow this guide



Now I have config-init.service.ts



import { Injectable } from '@angular/core';
import { Response } from "@angular/http";
import { UriConfig } from "../shared/models/uri-config.model";
import { HttpClient } from "@angular/common/http";

@Injectable({
providedIn: 'root'
})
export class ConfigInitService {

static settings: UriConfig;

load(): Promise<void> {
const file = 'assets/config/uris.json';
return new Promise<void>((resolve, reject) => {
this.http.get(file).toPromise().then((response: Response) => {
ConfigInitService.settings = <UriConfig>response.json();
console.log('Loading config');
resolve();
}).catch((err: any) => {
reject(`Could not load file "${file}": ${JSON.stringify(err)}`);
});
});
}

constructor(
private http: HttpClient
) {
}
}


In App module



providers: [
...
ConfigInitService,
{
provide: APP_INITIALIZER,
useFactory: () => initializeApp,
deps: [ConfigInitService],
multi: true
}
]
})
export class AppModule {
}

export function initializeApp(uriConfig: ConfigInitService) {
console.log('app init');
return () => uriConfig.load();
}


According to console the factory is being used when app inits, however there is no console message from load function as well ass no working service which depends on these settings.










share|improve this question






















  • If you check in the network tab of the browser developer tools, can you it making a request for that file?
    – user184994
    Nov 12 '18 at 8:16










  • load function even is not invoced ever
    – Sergey
    Nov 12 '18 at 8:28










  • Check the answer below, that should solve your problem
    – user184994
    Nov 12 '18 at 8:30










  • Load function is not call but do 'app init' appear in your console? It can help to see when the problem occur, if the 'app init' is not call then you have a problem inside your App Module, if it appear then it's inside your Load method where the problem lies.
    – Max
    Nov 12 '18 at 9:03














1












1








1







I need to make a config file which can be modified after app build. I'm trying to follow this guide



Now I have config-init.service.ts



import { Injectable } from '@angular/core';
import { Response } from "@angular/http";
import { UriConfig } from "../shared/models/uri-config.model";
import { HttpClient } from "@angular/common/http";

@Injectable({
providedIn: 'root'
})
export class ConfigInitService {

static settings: UriConfig;

load(): Promise<void> {
const file = 'assets/config/uris.json';
return new Promise<void>((resolve, reject) => {
this.http.get(file).toPromise().then((response: Response) => {
ConfigInitService.settings = <UriConfig>response.json();
console.log('Loading config');
resolve();
}).catch((err: any) => {
reject(`Could not load file "${file}": ${JSON.stringify(err)}`);
});
});
}

constructor(
private http: HttpClient
) {
}
}


In App module



providers: [
...
ConfigInitService,
{
provide: APP_INITIALIZER,
useFactory: () => initializeApp,
deps: [ConfigInitService],
multi: true
}
]
})
export class AppModule {
}

export function initializeApp(uriConfig: ConfigInitService) {
console.log('app init');
return () => uriConfig.load();
}


According to console the factory is being used when app inits, however there is no console message from load function as well ass no working service which depends on these settings.










share|improve this question













I need to make a config file which can be modified after app build. I'm trying to follow this guide



Now I have config-init.service.ts



import { Injectable } from '@angular/core';
import { Response } from "@angular/http";
import { UriConfig } from "../shared/models/uri-config.model";
import { HttpClient } from "@angular/common/http";

@Injectable({
providedIn: 'root'
})
export class ConfigInitService {

static settings: UriConfig;

load(): Promise<void> {
const file = 'assets/config/uris.json';
return new Promise<void>((resolve, reject) => {
this.http.get(file).toPromise().then((response: Response) => {
ConfigInitService.settings = <UriConfig>response.json();
console.log('Loading config');
resolve();
}).catch((err: any) => {
reject(`Could not load file "${file}": ${JSON.stringify(err)}`);
});
});
}

constructor(
private http: HttpClient
) {
}
}


In App module



providers: [
...
ConfigInitService,
{
provide: APP_INITIALIZER,
useFactory: () => initializeApp,
deps: [ConfigInitService],
multi: true
}
]
})
export class AppModule {
}

export function initializeApp(uriConfig: ConfigInitService) {
console.log('app init');
return () => uriConfig.load();
}


According to console the factory is being used when app inits, however there is no console message from load function as well ass no working service which depends on these settings.







angular typescript config






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 12 '18 at 8:13









Sergey

897317




897317












  • If you check in the network tab of the browser developer tools, can you it making a request for that file?
    – user184994
    Nov 12 '18 at 8:16










  • load function even is not invoced ever
    – Sergey
    Nov 12 '18 at 8:28










  • Check the answer below, that should solve your problem
    – user184994
    Nov 12 '18 at 8:30










  • Load function is not call but do 'app init' appear in your console? It can help to see when the problem occur, if the 'app init' is not call then you have a problem inside your App Module, if it appear then it's inside your Load method where the problem lies.
    – Max
    Nov 12 '18 at 9:03


















  • If you check in the network tab of the browser developer tools, can you it making a request for that file?
    – user184994
    Nov 12 '18 at 8:16










  • load function even is not invoced ever
    – Sergey
    Nov 12 '18 at 8:28










  • Check the answer below, that should solve your problem
    – user184994
    Nov 12 '18 at 8:30










  • Load function is not call but do 'app init' appear in your console? It can help to see when the problem occur, if the 'app init' is not call then you have a problem inside your App Module, if it appear then it's inside your Load method where the problem lies.
    – Max
    Nov 12 '18 at 9:03
















If you check in the network tab of the browser developer tools, can you it making a request for that file?
– user184994
Nov 12 '18 at 8:16




If you check in the network tab of the browser developer tools, can you it making a request for that file?
– user184994
Nov 12 '18 at 8:16












load function even is not invoced ever
– Sergey
Nov 12 '18 at 8:28




load function even is not invoced ever
– Sergey
Nov 12 '18 at 8:28












Check the answer below, that should solve your problem
– user184994
Nov 12 '18 at 8:30




Check the answer below, that should solve your problem
– user184994
Nov 12 '18 at 8:30












Load function is not call but do 'app init' appear in your console? It can help to see when the problem occur, if the 'app init' is not call then you have a problem inside your App Module, if it appear then it's inside your Load method where the problem lies.
– Max
Nov 12 '18 at 9:03




Load function is not call but do 'app init' appear in your console? It can help to see when the problem occur, if the 'app init' is not call then you have a problem inside your App Module, if it appear then it's inside your Load method where the problem lies.
– Max
Nov 12 '18 at 9:03












3 Answers
3






active

oldest

votes


















1














You are passing the function to useFactory through initializeApp function however you might be interested sending the data from load function. You should make the small correction in your initializeApp function as -



export function initializeApp(uriConfig: ConfigInitService) {
console.log('app init');
return uriConfig.load(); //<-- return the value from load function.
}





share|improve this answer





















  • No, it will return the function definition instead of calling and getting the value from it.
    – Sunil Singh
    Nov 12 '18 at 8:23










  • If you have read the code you could notice that I'm not returning anything but just assigning the result of promise to the static variable
    – Sergey
    Nov 12 '18 at 8:30










  • TypeError: Cannot read property 'load' of undefined
    – Sergey
    Nov 12 '18 at 8:31










  • Now you are encountered with next issue which is related ConfigInitService dependency. ConfigInitService` is not being injected or initialized in factory function initializeApp.
    – Sunil Singh
    Nov 12 '18 at 9:03










  • Why isn't it injected meanwhile it looks like injected via function parameter? Also it's specified in deps
    – Sergey
    Nov 12 '18 at 11:36



















0














Can you move the promise section inside function.



load(): Promise<void> {
const file = 'assets/config/uris.json';
return () => {
return new Promise<void>((resolve, reject) => {
this.http.get(file).toPromise().then((response: Response) => {
ConfigInitService.settings = <UriConfig>response.json();
console.log('Loading config');
resolve();
}).catch((err: any) => {
reject(`Could not load file "${file}": ${JSON.stringify(err)}`);
});
});
}
}





share|improve this answer





























    0














    Solved by



    import { Injectable } from '@angular/core';
    import { UriConfig } from "../shared/models/uri-config.model";
    import { HttpClient } from "@angular/common/http";

    @Injectable({
    providedIn: 'root'
    })
    export class ConfigInitService {

    static settings: UriConfig;

    load() {
    }

    constructor(
    private http: HttpClient
    ) {
    this.http.get('assets/config/uris.json').subscribe((file: UriConfig) => {
    ConfigInitService.settings = file;
    });
    }
    }


    As my investigation showed the service is being initialized meanwhile function isn't invoked, therefore I've placed simple http GET request in constructor and achieved the result I needed.






    share|improve this answer





















      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53258103%2fangular-editable-config%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      3 Answers
      3






      active

      oldest

      votes








      3 Answers
      3






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      1














      You are passing the function to useFactory through initializeApp function however you might be interested sending the data from load function. You should make the small correction in your initializeApp function as -



      export function initializeApp(uriConfig: ConfigInitService) {
      console.log('app init');
      return uriConfig.load(); //<-- return the value from load function.
      }





      share|improve this answer





















      • No, it will return the function definition instead of calling and getting the value from it.
        – Sunil Singh
        Nov 12 '18 at 8:23










      • If you have read the code you could notice that I'm not returning anything but just assigning the result of promise to the static variable
        – Sergey
        Nov 12 '18 at 8:30










      • TypeError: Cannot read property 'load' of undefined
        – Sergey
        Nov 12 '18 at 8:31










      • Now you are encountered with next issue which is related ConfigInitService dependency. ConfigInitService` is not being injected or initialized in factory function initializeApp.
        – Sunil Singh
        Nov 12 '18 at 9:03










      • Why isn't it injected meanwhile it looks like injected via function parameter? Also it's specified in deps
        – Sergey
        Nov 12 '18 at 11:36
















      1














      You are passing the function to useFactory through initializeApp function however you might be interested sending the data from load function. You should make the small correction in your initializeApp function as -



      export function initializeApp(uriConfig: ConfigInitService) {
      console.log('app init');
      return uriConfig.load(); //<-- return the value from load function.
      }





      share|improve this answer





















      • No, it will return the function definition instead of calling and getting the value from it.
        – Sunil Singh
        Nov 12 '18 at 8:23










      • If you have read the code you could notice that I'm not returning anything but just assigning the result of promise to the static variable
        – Sergey
        Nov 12 '18 at 8:30










      • TypeError: Cannot read property 'load' of undefined
        – Sergey
        Nov 12 '18 at 8:31










      • Now you are encountered with next issue which is related ConfigInitService dependency. ConfigInitService` is not being injected or initialized in factory function initializeApp.
        – Sunil Singh
        Nov 12 '18 at 9:03










      • Why isn't it injected meanwhile it looks like injected via function parameter? Also it's specified in deps
        – Sergey
        Nov 12 '18 at 11:36














      1












      1








      1






      You are passing the function to useFactory through initializeApp function however you might be interested sending the data from load function. You should make the small correction in your initializeApp function as -



      export function initializeApp(uriConfig: ConfigInitService) {
      console.log('app init');
      return uriConfig.load(); //<-- return the value from load function.
      }





      share|improve this answer












      You are passing the function to useFactory through initializeApp function however you might be interested sending the data from load function. You should make the small correction in your initializeApp function as -



      export function initializeApp(uriConfig: ConfigInitService) {
      console.log('app init');
      return uriConfig.load(); //<-- return the value from load function.
      }






      share|improve this answer












      share|improve this answer



      share|improve this answer










      answered Nov 12 '18 at 8:17









      Sunil Singh

      6,1372626




      6,1372626












      • No, it will return the function definition instead of calling and getting the value from it.
        – Sunil Singh
        Nov 12 '18 at 8:23










      • If you have read the code you could notice that I'm not returning anything but just assigning the result of promise to the static variable
        – Sergey
        Nov 12 '18 at 8:30










      • TypeError: Cannot read property 'load' of undefined
        – Sergey
        Nov 12 '18 at 8:31










      • Now you are encountered with next issue which is related ConfigInitService dependency. ConfigInitService` is not being injected or initialized in factory function initializeApp.
        – Sunil Singh
        Nov 12 '18 at 9:03










      • Why isn't it injected meanwhile it looks like injected via function parameter? Also it's specified in deps
        – Sergey
        Nov 12 '18 at 11:36


















      • No, it will return the function definition instead of calling and getting the value from it.
        – Sunil Singh
        Nov 12 '18 at 8:23










      • If you have read the code you could notice that I'm not returning anything but just assigning the result of promise to the static variable
        – Sergey
        Nov 12 '18 at 8:30










      • TypeError: Cannot read property 'load' of undefined
        – Sergey
        Nov 12 '18 at 8:31










      • Now you are encountered with next issue which is related ConfigInitService dependency. ConfigInitService` is not being injected or initialized in factory function initializeApp.
        – Sunil Singh
        Nov 12 '18 at 9:03










      • Why isn't it injected meanwhile it looks like injected via function parameter? Also it's specified in deps
        – Sergey
        Nov 12 '18 at 11:36
















      No, it will return the function definition instead of calling and getting the value from it.
      – Sunil Singh
      Nov 12 '18 at 8:23




      No, it will return the function definition instead of calling and getting the value from it.
      – Sunil Singh
      Nov 12 '18 at 8:23












      If you have read the code you could notice that I'm not returning anything but just assigning the result of promise to the static variable
      – Sergey
      Nov 12 '18 at 8:30




      If you have read the code you could notice that I'm not returning anything but just assigning the result of promise to the static variable
      – Sergey
      Nov 12 '18 at 8:30












      TypeError: Cannot read property 'load' of undefined
      – Sergey
      Nov 12 '18 at 8:31




      TypeError: Cannot read property 'load' of undefined
      – Sergey
      Nov 12 '18 at 8:31












      Now you are encountered with next issue which is related ConfigInitService dependency. ConfigInitService` is not being injected or initialized in factory function initializeApp.
      – Sunil Singh
      Nov 12 '18 at 9:03




      Now you are encountered with next issue which is related ConfigInitService dependency. ConfigInitService` is not being injected or initialized in factory function initializeApp.
      – Sunil Singh
      Nov 12 '18 at 9:03












      Why isn't it injected meanwhile it looks like injected via function parameter? Also it's specified in deps
      – Sergey
      Nov 12 '18 at 11:36




      Why isn't it injected meanwhile it looks like injected via function parameter? Also it's specified in deps
      – Sergey
      Nov 12 '18 at 11:36













      0














      Can you move the promise section inside function.



      load(): Promise<void> {
      const file = 'assets/config/uris.json';
      return () => {
      return new Promise<void>((resolve, reject) => {
      this.http.get(file).toPromise().then((response: Response) => {
      ConfigInitService.settings = <UriConfig>response.json();
      console.log('Loading config');
      resolve();
      }).catch((err: any) => {
      reject(`Could not load file "${file}": ${JSON.stringify(err)}`);
      });
      });
      }
      }





      share|improve this answer


























        0














        Can you move the promise section inside function.



        load(): Promise<void> {
        const file = 'assets/config/uris.json';
        return () => {
        return new Promise<void>((resolve, reject) => {
        this.http.get(file).toPromise().then((response: Response) => {
        ConfigInitService.settings = <UriConfig>response.json();
        console.log('Loading config');
        resolve();
        }).catch((err: any) => {
        reject(`Could not load file "${file}": ${JSON.stringify(err)}`);
        });
        });
        }
        }





        share|improve this answer
























          0












          0








          0






          Can you move the promise section inside function.



          load(): Promise<void> {
          const file = 'assets/config/uris.json';
          return () => {
          return new Promise<void>((resolve, reject) => {
          this.http.get(file).toPromise().then((response: Response) => {
          ConfigInitService.settings = <UriConfig>response.json();
          console.log('Loading config');
          resolve();
          }).catch((err: any) => {
          reject(`Could not load file "${file}": ${JSON.stringify(err)}`);
          });
          });
          }
          }





          share|improve this answer












          Can you move the promise section inside function.



          load(): Promise<void> {
          const file = 'assets/config/uris.json';
          return () => {
          return new Promise<void>((resolve, reject) => {
          this.http.get(file).toPromise().then((response: Response) => {
          ConfigInitService.settings = <UriConfig>response.json();
          console.log('Loading config');
          resolve();
          }).catch((err: any) => {
          reject(`Could not load file "${file}": ${JSON.stringify(err)}`);
          });
          });
          }
          }






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 12 '18 at 8:45









          Suresh Kumar Ariya

          4,4131215




          4,4131215























              0














              Solved by



              import { Injectable } from '@angular/core';
              import { UriConfig } from "../shared/models/uri-config.model";
              import { HttpClient } from "@angular/common/http";

              @Injectable({
              providedIn: 'root'
              })
              export class ConfigInitService {

              static settings: UriConfig;

              load() {
              }

              constructor(
              private http: HttpClient
              ) {
              this.http.get('assets/config/uris.json').subscribe((file: UriConfig) => {
              ConfigInitService.settings = file;
              });
              }
              }


              As my investigation showed the service is being initialized meanwhile function isn't invoked, therefore I've placed simple http GET request in constructor and achieved the result I needed.






              share|improve this answer


























                0














                Solved by



                import { Injectable } from '@angular/core';
                import { UriConfig } from "../shared/models/uri-config.model";
                import { HttpClient } from "@angular/common/http";

                @Injectable({
                providedIn: 'root'
                })
                export class ConfigInitService {

                static settings: UriConfig;

                load() {
                }

                constructor(
                private http: HttpClient
                ) {
                this.http.get('assets/config/uris.json').subscribe((file: UriConfig) => {
                ConfigInitService.settings = file;
                });
                }
                }


                As my investigation showed the service is being initialized meanwhile function isn't invoked, therefore I've placed simple http GET request in constructor and achieved the result I needed.






                share|improve this answer
























                  0












                  0








                  0






                  Solved by



                  import { Injectable } from '@angular/core';
                  import { UriConfig } from "../shared/models/uri-config.model";
                  import { HttpClient } from "@angular/common/http";

                  @Injectable({
                  providedIn: 'root'
                  })
                  export class ConfigInitService {

                  static settings: UriConfig;

                  load() {
                  }

                  constructor(
                  private http: HttpClient
                  ) {
                  this.http.get('assets/config/uris.json').subscribe((file: UriConfig) => {
                  ConfigInitService.settings = file;
                  });
                  }
                  }


                  As my investigation showed the service is being initialized meanwhile function isn't invoked, therefore I've placed simple http GET request in constructor and achieved the result I needed.






                  share|improve this answer












                  Solved by



                  import { Injectable } from '@angular/core';
                  import { UriConfig } from "../shared/models/uri-config.model";
                  import { HttpClient } from "@angular/common/http";

                  @Injectable({
                  providedIn: 'root'
                  })
                  export class ConfigInitService {

                  static settings: UriConfig;

                  load() {
                  }

                  constructor(
                  private http: HttpClient
                  ) {
                  this.http.get('assets/config/uris.json').subscribe((file: UriConfig) => {
                  ConfigInitService.settings = file;
                  });
                  }
                  }


                  As my investigation showed the service is being initialized meanwhile function isn't invoked, therefore I've placed simple http GET request in constructor and achieved the result I needed.







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 12 '18 at 11:38









                  Sergey

                  897317




                  897317






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.





                      Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                      Please pay close attention to the following guidance:


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53258103%2fangular-editable-config%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      這個網誌中的熱門文章

                      Xamarin.form Move up view when keyboard appear

                      Post-Redirect-Get with Spring WebFlux and Thymeleaf

                      Anylogic : not able to use stopDelay()