Angular standalone: Cannot access value set by provideAppInitializer in another provider

In my angular application i m setting provideAppInitializer to get config from service and then provideMatomo(loadMatomoConfig)) tries to load the config which set by provideAppInitializer(intializeAppFn)

export const appConfig: ApplicationConfig = {

providers: [
...
provideAppInitializer(intializeAppFn),
provideMatomo(loadMatomoConfig))
..
]
};

const intializeAppFn = async () => {
try {
const configService = inject(AppConfigService);
await configService.loadConfig();
return true
}catch (error) {
throw error;
}

};

const loadMatomoConfig = ():MatomoConfiguration => {
const c = inject(AppConfigService)
console.log('config',c.getConfig()) //this always null

}


AppConfigService.ts

export class AppConfigService {

private config: AppConfig | null = null;

constructor(private http: HttpClient) { }

async loadConfig(): Promise<void> {
try {
const response = await lastValueFrom(
this.http.get('/config/app-config.json')
);
this.config = response as AppConfig;
} catch (error) {
console.error('Failed to load configuration', error);
throw error;
}
}

getConfig(): AppConfig {
if (!this.config) {
throw new Error('Configuration not loaded. Ensure APP_INITIALIZER has completed.');
}
return this.config;
}
}


the config setting properly in the first provideAppInitializer(intializeAppFn) ,but when try to get in the loadMatomoConfig (c.getConfig() is always null) its always getting null

Continue reading...