[Angular] app_inizializer multiplo

[rinosan_76bis]

Salve a tutti, è tutto il giorno che sbatto la testa su questo argomento, trovando solo soluzioni (online) ormai deprecate.
Io ho il mio app.module.ts:

[... tutti gli import...]
function loadConfigFactory(configService: AppConfigService) {
return () =>configService.loadJSON();
}
export function initApp(configService: AppConfigService) {
return () =>configService.loadConfigurazione();
}

@NgModule({
    declarations: [
        AppComponent,
        FooterComponent,
        HeaderComponent,
// ToastComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        NgbModule,
        FontAwesomeModule,
        BrowserAnimationsModule,
ToastrModule.forRoot()
    ],
    providers: [
        AppConfigService,
        { provide:APP_INITIALIZER, useFactory: loadConfigFactory, deps: [AppConfigService], multi:true },
        { provide:APP_INITIALIZER, useFactory: initApp, deps: [AppConfigService], multi:true },
        { provide:HTTP_INTERCEPTORS, useClass: GestoreIntercept, multi:true },
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
function next(next:any, arg1: (el:any) =>void) {
throw newError('Function not implemented.');
}

ed i due service che dovrebbero essere concatenati. Il primo contiene i metodi per leggere il file di configurazione e il metodo per richiamare una seconda configurazione dal server:

[... tutti gli import...]
@Injectable({
    providedIn:'root'
})
export class AppConfigService {
static settings: IAppConfig;
static configurazione: Configurazione;
private api: ApiService;
public constructor(private http: HttpClient, api: ApiService) {
this.api=api
    }
loadJSON() {
console.log("loadJSON");
const jsonFile='assets/config/appConfig.json';
return new Observable((subscriber) => {
this.http.get(jsonFile).subscribe({
//success
next: (resp) => {
console.log("passo2");
AppConfigService.settings= <IAppConfig>resp;
subscriber.complete();
                },
// errore
error: (err) => {
// gestisci errore
console.log(err);
subscriber.error();
                }
            });
        })
    }
loadConfigurazione() {
return newObservable((subscriber) => {
this.api.getConfigurazioni().subscribe({
//success
next: (resp) => {
console.log("passo3");
let arrConf=newMap<string, string|number|boolean>();
resp.data.forEach((element: { chiave:string; valore:string|number|boolean; }) => {
arrConf.set(element.chiave, element.valore);
                    });
console.log("passo");
AppConfigService.configurazione=new Configurazione(arrConf);
console.log(AppConfigService.configurazione.getValore("durata"));
subscriber.complete();
                },
// errore
error: (err) => {
// gestisci errore
console.log(err);
subscriber.error();
                }
            });
        })
    }
}

SEGUE...

[rinosan_76bis]

ed il secondo un service per le chiamate API:

[... tutti gli import...] 
@Injectable({
    providedIn:'root'
})
export class ApiService {
private static server:string="http://localhost/cama/codexServer/server.php/api/";

public constructor(private http: HttpClient) { }

public getConfigurazioni() {
console.log("loadConfigurazione");
console.log("CONFIG", AppConfigService.settings)

const risorsa:string[] = ["configurazioni"];
const rit=this.richiestaGenerica(risorsa, "GET");
console.log("RIT", rit);
return rit;
    }
protected calcolaUrl(risorsa: (string|number)[]):string {
//const server: string = "http://localhost/cama/codexServer/server.php/api/";
const vers:string="v1";
let url:string=ApiService.server+vers+"/";
risorsa.forEach(element => {
url=url+element+"/";
        });
return url;
    }

protected richiestaGenerica(risorsa: (string|number)[], tipo:string|null=null, parametri: Object |null=null): Observable<RispostaServer> {
tipo= (tipo!=null) ?tipo.toUpperCase() :tipo;
switch (tipo) {
case "GET": return this.http.get<RispostaServer>(this.calcolaUrl(risorsa));
break;

default: return this.http.get<RispostaServer>(this.calcolaUrl(risorsa));
break;
        }
    }


}

Il problema è che partono entrambi contemporaneamente e quindi il loadConfigurazione() viene chiamato prima che loadJSON() finisca il suo compito. Qualcuno sa come si può risolvere? Online ci sono mille esempi incompleti o datati (usano il toPromise()) e per me che sono nuovo di ste cose è un bagno di sangue!
Grazie in anticipo
Rino

[ciro78]

ciao Rino,
ti invito a copiare il codice che vuoi incollare qui sul forum, prima su un editor di testo. Quando fai copia incolla da un IDE il codice risulta illegibile.

[rinosan_76bis]

non è più possibile modificare in modo da correggere come mi hai detto?

[ciro78]

non è più possibile modificare in modo da correggere come mi hai detto?

no, ma puoi sempre rincollare il codice..così magari rendi la vita più facile a chi vuole aiutare.

[rinosan_76bis]

Alo momento sono riuscito a trovare una soluzione accettabile creando una unica APP_INIZIALIZER conu una sola funzione che richiama il tutto.
Ecco il codice:

//---------------------------------------------------------------------------------------------------------------
/**
 * Funzione che concatena il caricamento del file JSON con le altre api
 * 
 * @param configService 
 * @returns 
 */
export function inizioApp(configService: AppConfigService) {
    return () => new Observable((subscriber) => {


        configService.caricaJSON().pipe(
            map(valore => {
                AppConfigService.settings = <IAppConfig>valore;
                return valore;
            }),
            concatMap(() => {
                const apinConf$ = apiConfigurazione(configService);
                const apiLng$ = apiLingue(configService);
                const apiContattiRuoli$ = apiContattiRuoli(configService);
                const apiContattiStati$ = apiContattiStati(configService);
                const apiTipiIndirizzi$ = apiTipiIndirizzi(configService);
                const apiTipiRecapiti$ = apiTipiRecapiti(configService);
                const apiTraduzioni$ = apiTraduzioni(configService);
                return combineLatest([apinConf$, apiLng$, apiContattiRuoli$, apiContattiStati$, apiTipiIndirizzi$, apiTipiRecapiti$, apiTraduzioni$]);
            })
        ).subscribe({
            next: () => {
                subscriber.complete();
            },
            error: () => { },
            complete: () => { }
        });
    });
}

Questo è solo il codice della funzione, il resto del codice è il solito di tutti gli esempi e manuali.
Qui creo il primo Observable e nel concatMap creo gli n altri Observable che con combineLatest vengono eseguiti in parallelo, ma solo dopo che il primo (caricaJSON) ha terminato il suo lavoro. Funziona alla grande, ma ditemi voi se ci sono problemi che non ho notato per ora.