Nrthugu

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.

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.

}

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

            });

        });

      }

    }

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.