Angular: Resolving HTTP Request Pending State During Route Navigation

I currently have the issue that my HTTP requests are stuck in a "pending" state (for more than 10 seconds until it starts the request).

This issue is especially common if I navigate to other pages with Angular's Route Navigation (routerLink='/dashboard/contact as an example) - but it also occurs if I visit a page in the browser directly.

The API request getServerData gets fired if a page gets loaded (constructor method) or if route navigation is called - it's necessary for the page's content.

As you can see in my below code, I also have a simple caching system to avoid many HTTP requests, but that works as expected and is not the problem here.

Dashboard-Component, which calls the Service function:

getServerData(): void {
if (!this.dataService.active_guild) { return; }
if (!window.location.href.endsWith('/dashboard')) { return; }

forkJoin({guildUsage: this.apiService.getGuildUsage(100),
moduleStatus: this.apiService.getModuleStatus(this.dataService.active_guild!.id)})
.subscribe({
next: ({ guildUsage, moduleStatus }: { guildUsage: SliderItems[], moduleStatus: TasksCompletionList }): void => {
this.updateTasks(moduleStatus);
this.servers = guildUsage;

this.dataService.isLoading = false;

if (moduleStatus['task_1'].cached) { return; }
localStorage.setItem('moduleStatus', JSON.stringify(moduleStatus));
localStorage.setItem('moduleStatusTimestamp', Date.now().toString());
},
error: (err: HttpErrorResponse): void => {
if (err.status === 403) {
this.dataService.redirectLoginError('FORBIDDEN');
return;
} else if (err.status === 429) {
this.dataService.redirectLoginError('REQUESTS');
return;
} else if (err.status === 0) {
this.dataService.redirectLoginError('OFFLINE');
return;
}
this.dataService.isLoading = false;
}
});
}


Api-Service, which makes the HTTP request:

getGuildUsage(limit: number): Observable<SliderItems[]> {
return this.http.get<SliderItems[]>(`${this.API_URL}/stats/guilds_usage` + (limit ? `?limit=${limit}` : ''));
}

getModuleStatus(guild_id: string): Observable<TasksCompletionList> {
const moduleStatusTimestamp: string | null = localStorage.getItem('moduleStatusTimestamp');
const moduleStatus: string | null = localStorage.getItem('moduleStatus');

try {
if (moduleStatusTimestamp && moduleStatus) {
const timestamp: number = parseInt(moduleStatusTimestamp);
const module: TasksCompletionList = JSON.parse(moduleStatus);

// check if module status cache is younger than 1 minute
if (Date.now() - timestamp < 60000 && module['task_1'].guild_id === guild_id) {
module['task_1'].cached = true;
return of(module);
}
}
} catch (error) { console.error('Cache reading error:', error); }

return this.http.get<TasksCompletionList>(`${this.API_URL}/progress/modules?guild_id=${guild_id}`,
{ headers: this.authService.headers });
}


My API is also answering very fast, so I don't think that is the issue here.

Continue reading...