We’re using Angular 18, with SSR enabled.
I have created a component that uses a ComponentStore service. In this component, I am calling a function within the service to load and populate the store with the required data from the API.
<code>@Input({ required: true }) accountId: string = null!;
ngOnInit(): void {
this.componentStore.getComponentData(this.accountId);
}
</code>
<code>@Input({ required: true }) accountId: string = null!;
ngOnInit(): void {
this.componentStore.getComponentData(this.accountId);
}
</code>
@Input({ required: true }) accountId: string = null!;
ngOnInit(): void {
this.componentStore.getComponentData(this.accountId);
}
The function in the service looks like this:
<code>
getComponentData(accountId: string): void {
of(accountId).pipe(
filter(accountId => !!accountId),
take(1),
switchMap(accountId => {
return forkJoin([
this.apiService.getSomeData(accountId),
this.apiService.getSomeOtherData(accountId)
]);
})
).subscribe(([someData, someOtherData]) => {
this.setData(someData);
this.setOtherData(someOtherData);
});
}
</code>
<code>
getComponentData(accountId: string): void {
of(accountId).pipe(
filter(accountId => !!accountId),
take(1),
switchMap(accountId => {
return forkJoin([
this.apiService.getSomeData(accountId),
this.apiService.getSomeOtherData(accountId)
]);
})
).subscribe(([someData, someOtherData]) => {
this.setData(someData);
this.setOtherData(someOtherData);
});
}
</code>
getComponentData(accountId: string): void {
of(accountId).pipe(
filter(accountId => !!accountId),
take(1),
switchMap(accountId => {
return forkJoin([
this.apiService.getSomeData(accountId),
this.apiService.getSomeOtherData(accountId)
]);
})
).subscribe(([someData, someOtherData]) => {
this.setData(someData);
this.setOtherData(someOtherData);
});
}
When I navigate to the page through the application, the page loads and populates with data correctly. However, when I refresh the page it hangs for 30 seconds and then Angular throws the following error: Page /path/to/page did not render in 30 seconds..
If I remove the call to the componentStore in ngOnInit inside the component, the page will refresh and render, but obviously no data will be retrieved.
I’ve tried using afterNextRender but the callback doesn’t fire and therefore no data is loaded. I’m out of ideas now.
Any extra help would be appreciated.