Getting different response for same api call on different browsers

Question

I am working on a project using Angular6. I have been scratching my head for three days on a weird issue. The issue is, for a same api call with proper parameters passed, I am getting different responses on two browsers (chrome and internet explorer 11). The chrome response is perfectly fine and updated.

The Algorithm: I have two methods

1. populateProjectTimesheetUsers(): It brings the users of a timesheet from the server.
2. onSaveAddUserInstructionClick(): It saves a new user to the timesheet.

The flow: After saving a user to the timesheet using "onSaveAddUserInstructionClick()", the "populateProjectTimesheetUsers()" is called to get the updated users data on the screen.

The issue: On chrome, the "populateProjectTimesheetUsers()" is fetching the updated data but on IE, it brings the old data i.e the latest user is not available in the latest Users list on IE.

The codes:

onSaveAddUserInstructionClick(){
    this.addUserModel.WorkerId = this.addUserModel.Worker.Key;
    this.adminTimeEntryService.addUserToInstruction(this.selectedProjectId, this.addUserModel.WorkerId).subscribe(
      (response) => {
        this.messageService.showMessage("success","User added to instruction successfully");
        this.populateProjectTimesheetUsers(this.selectedProjectId);
        this.addUserModalRef.hide();
      },
      (error) => {
        this.handleError(error);
        this.addUserModalRef.hide();
      }
    )
  }

populateProjectTimesheetUsers(projectId = null) {
    if (projectId != null) {
      this.userGridRowData = [];

      this.adminTimeEntryService.getTimesheetUsersByProjectId(projectId).subscribe(
        (response) => {
          this.serviceLineGridRowData = response.ServiceLines;
          this.userGridRowData = response.Users;
          console.log("this.userGridRowData1: " , this.userGridRowData);
          console.log("response1: " , response );
          for(let i=0; i< this.userGridRowData.length; i++){
            this.userGridRowData[i].AddInstructionRate = "Add Instruction Rate"; 
            this.userGridRowData[i].RemoveUserFromInstruction = "Remove User From Instruction";
          }

          console.log("this.this.userGridRowData2: " , this.userGridRowData);
          console.log("response2: " , response );

          setTimeout(()=>{
            console.log("this.this.userGridRowData3: " , this.userGridRowData);
            console.log("response3: " , response );
            this.userGridApi.setRowData(this.userGridRowData);
            this.serviceLineGridApi.setRowData(this.serviceLineGridRowData);
          }, 0);
        },
        (error) => {
          Logger.logError(`getTimesheetUsersByProjectId error: ${JSON.stringify(error.error)}`);
        }
      );
    }
  }

The attempts:

1. I checked the by reference assigning of the variables to one another.

2. I checked the a-synchronicity of the function calls.

3. Refreshed the cache

etc

But the problem is still there. It would be great if someone point at the issue so we may learn. May be I am missing the smallest thing but what is that I am unable to find that out.

Answer 1

Perhaps the issue is related to the IE browser caching.

Try to clear the IE browser history, and refer this article and this thread to add an http header, then disable caching:

headers = new Headers({
        'Cache-Control':  'no-cache, no-store, must-revalidate, post- 
                            check=0, pre-check=0',
        'Pragma': 'no-cache',
        'Expires': '0'
    });