[Fixed] Handling long Web Requests In angualr 8

Issue

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?