Why do I get timeout error while fetching HTTP request inside Angular App?

I am using trying to create a small project based on Angular 20, where I provide front-end for data and charts from Fintacharts API, using SSR (Server-side Rendering), because CORS policies didn't allow me to fetch data using a normal built. I have encountered a problem of fetching data for the templates using HttpClient. I have implemented a Fintech service, code below provided:


import { isPlatformServer } from '@angular/common';
import { Inject, Injectable, makeStateKey, OnInit, PLATFORM_ID, TransferState } from '@angular/core';
import { environment } from '../../environments/environment.development';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, ReplaySubject } from 'rxjs';
import { get } from 'http';

@Injectable({
providedIn: 'root'
})
export class Fintech {//implements OnInit {
private Token: string="";
private TokenType: string="";
private Providers: Array<string> = [];

constructor(private http: HttpClient) {
this.getToken();
}

private async getToken(){
let headers: HttpHeaders;
headers = new HttpHeaders();
headers = headers.set('Content-Type', 'application/x-www-form-urlencoded');
let body = new URLSearchParams({
"grant_type": "password",
'client_id': 'app-cli',
'username': environment.USERNAME,
'password': environment.PASSWORD
}).toString();
let ExpireTime: number = 0;
this.http.post(`${environment.URI}/identity/realms/fintatech/protocol/openid-connect/token`,
body, {headers: headers}).subscribe({
next: (data) => {
console.log(data);
let Object_data = Object(data);
this.Token = Object_data["access_token"];
this.TokenType = Object_data["token_type"];
ExpireTime = Object_data["expires_in"];
},
error: (error) => {
console.log(error);
}
});
if (ExpireTime != 0) {
setTimeout(() => this.getToken(), ExpireTime * 1000);
}
}

public getProviders() {
let headers: HttpHeaders;
headers = new HttpHeaders();
headers = headers.set('Authorization', `${this.TokenType} ${this.Token}`);
return this.http.get(`${environment.URI}/api/instruments/v1/providers`,
{ headers: headers })

}
}



I tried to fetch data from components that utilize this Service, but it only enters endless loop of the same error upon fetch (sometimes it actually fetches data, but only at the beginning). I have figured out that component call the GetProviders() methods 6 times before, and 6 times after the Token is finally fetched, but I have no idea why it keeps going in case it encounters an error. Especially when I tried to place return; to exit the method.

Aside from the timeout problem, I have no idea what causes this error, and how to handle/fix it:



HttpErrorResponse {
headers: _HttpHeaders {
headers: Map(0) {},
normalizedNames: Map(0) {},
lazyInit: undefined,
lazyUpdate: null
},
status: 0,
statusText: 'Unknown Error',
url: 'https://platform.fintacharts.com/api/instruments/v1/providers',
ok: false,
type: undefined,
name: 'HttpErrorResponse',
message: 'Http failure response for https://platform.fintacharts.com/api/instruments/v1/providers: 0 undefined',
error: TypeError: fetch failed
at node:internal/deps/undici/undici:15422:13
at _ZoneDelegate.invoke (eval at runInlinedModule (file:///mnt/d/Programs/VSC%20Projects/StockServer/node_modules/vite/dist/node/module-runner.js:988:20), :336:158)
at ZoneImpl.run (eval at runInlinedModule (file:///mnt/d/Programs/VSC%20Projects/StockServer/node_modules/vite/dist/node/module-runner.js:988:20), :105:35)
at eval (eval at runInlinedModule (file:///mnt/d/Programs/VSC%20Projects/StockServer/node_modules/vite/dist/node/module-runner.js:988:20), :1040:30)
at _ZoneDelegate.invokeTask (eval at runInlinedModule (file:///mnt/d/Programs/VSC%20Projects/StockServer/node_modules/vite/dist/node/module-runner.js:988:20), :362:171)
at ZoneImpl.runTask (eval at runInlinedModule (file:///mnt/d/Programs/VSC%20Projects/StockServer/node_modules/vite/dist/node/module-runner.js:988:20), :143:37)
at drainMicroTaskQueue (eval at runInlinedModule (file:///mnt/d/Programs/VSC%20Projects/StockServer/node_modules/vite/dist/node/module-runner.js:988:20), :522:23)
at processTicksAndRejections (node:internal/process/task_queues:105:5)
at runNextTicks (node:internal/process/task_queues:69:3)
at listOnTimeout (node:internal/timers:569:9) {
[cause]: AggregateError [ETIMEDOUT]:
at internalConnectMultiple (node:net:1134:18)
at internalConnectMultiple (node:net:1210:5)
at Timeout.internalConnectMultipleTimeout (node:net:1742:5)
at listOnTimeout (node:internal/timers:610:11)
at process.processTimers (node:internal/timers:543:7) {
code: 'ETIMEDOUT',
[errors]: [Array]
}
}
}

Continue reading...