angularhttp-status-code-504

Handling long Web Requests In angualr 8


I Have an angular 8 application,when i make long request throws Gateway Timeout 504 Is there any way to avoid this exception from angular side not from server configuration side?

 const sub = this.reportsService.getUsageReport(this.reportRequest)
       .subscribe((res: any) => {
       var blob = new Blob([(res)._body], {
         type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;"
        });
         if(res.status == 204){
           alert(this.NoDataFoundMsg);
           this.loadingReport = false ;
         }
         else{
         FileSaver.saveAs(blob, "SE2_Usage_Report.xlsx");
         this.loadingReport = false ;
         }
      },error => {
        this.loadingReport = false ;
        this.handleError(sub);
      }
      )

getUsageReport() this service take a above 5 min because the returned data is huge so the time of request maybe is greater than 5 min, so When the time takes more than 5 minutes angular throws Gateway Timeout 504

Solution

  • You can add a timeout configuration in the proxy.conf.json file in you Angular app. Check how to create it from angular docs from this link Proxying to a backend server

    Just add a key timeout on the API's JSON object with the configured seconds like this:

    {
      "/api": {
          "target": "http://localhost:3000",
          "secure": false,
          "timeout": 360000
      }
    }
    

    You can check this answer too How to increase HTTP request timeout more than 2 minutes in Angular 7?