Not able to make firstValueFrom/async work with Angular

I'm trying to create an Angular (v19) app, which basically consumes an API and uses the responses to render the app's UIs. A pretty standard scenario. The only thing more “audacious” is that I would like to initialize a variable during the construction of the app, so that it is available to other components.

But the problem is that the service, which I placed into the constructor, doesn't receive the results before the Angular starts the other stages of the lifecycle. The same problem is described here, here and others.

My first step was to create a service to consume the API:

frequency.service.ts

fetchMostRecent(): Observable<Frequency> {
console.log('FrequencyService.fetchMostRecent');
return this.httpClient.get<Frequency>(this.baseUrl + '/availability');
}


And in my component I'm trying to use some of the solutions suggested (toPromise/firstValueFrom/async) in the posts mentioned:

app.component.ts

export class AppComponent implements OnInit {
constructor(private frequencyService: FrequencyService) {
console.log('constructor');
this.fetchMostRecentAsync();
}

ngOnInit() {
console.log('ngOnInit');
}

async fetchMostRecentAsync() {
console.log('fetchMostRecentAsync');
this.mostRecent = await firstValueFrom(this.frequencyService.fetchMostRecent()).then(value => {
return value);
});
console.log('fetchMostRecentAsync: ' + this.mostRecent);
}
}


However, the ngOnInit is still executed before the request into the constructor is completed. In the console, the call sequence looks like this:

1. constructor
2. fetchMostRecentAsync
3. FrequencyService.fetchMostRecent
4. ngOnInit
5. fetchMostRecentAsync: [object Object]

So my question is how I should implement this correctly...

Continue reading...