Handling long Web Requests In angualr 8

Question

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

Welcome to StackOverflow, and thanks for posting! Can you update your question to provide a specific code example of what triggered the timeout? That will help other users provide a helpful answer. Check here for more help: stackoverflow.com/help/how-to-ask — superhawk610, Mar 22 '21 at 23:30
the simplest answer is no, you can't. You can only use some sort of queue where you can put a process command, generate your report, when report is ready you should notify to your client that the report is ready to be downloaded, you can use real time communication (signalR, socketIO, firestore, etc... ), or polling, all the best — ale, Mar 24 '21 at 09:52
504 is a server-side exception, meaning the server is closing the connection; there's nothing you can do to change that from the client. — superhawk610, Mar 24 '21 at 18:45

score 0 · Accepted Answer · edited Mar 29 '21 at 01:44

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?

Handling long Web Requests In angualr 8

1 Answers1