Duplicate HTTP requests in Angular (v20) UI — possible causes and how to prevent?

Description:

I am currently investigating a duplicate HTTP request issue in an Angular application and would like to understand the possible causes and how to troubleshoot it.

Environment:

Angular: 20.1.x
Node.js: 22.19.0
TypeScript: 5.8.3

Observed behavior:

On a specific screen, a single user action (e.g., clicking a button) is expected to trigger only one HTTP request. However, in some cases, two identical requests are sent to the backend.

From log analysis:

There is a small time gap between the two requests (a few seconds). Both requests are successfully processed by the back-end. No other API requests appear between these two requests. This behavior looks like two separate triggers, rather than a single action causing duplicate emissions.

Possible scenario 1 (Page refresh):

The user clicks a button. The page enters a loading state. The user refreshes the page (e.g., presses F5) during loading. After reload, the same request is triggered again.

Possible scenario 2 (Delayed UI update → second click):

The user clicks the button and the request is sent successfully. The back-end returns a successful response. However due to UI update delay (e.g., change detection or rendering delay), the screen still shows the previous state. The user assumes the first click did not work and clicks again. A second request is triggered and also completes successfully.

At this point, I suspect this is more related to UI / user interaction rather than Angular automatically sending duplicate requests.

Questions:

Has anyone encountered a similar duplicate HTTP request issue in Angular? What was the root cause?

If this is caused by unnecessary re-rendering or change detection, how can it be effectively diagnosed?

In Angular, how can we prevent duplicate requests that might be indirectly triggered by component re-rendering?

What are the recommended approaches to prevent duplicate requests caused by user double actions, such as:

disabling the button during processing debouncing click events using a request-in-progress flag

I would appreciate any insights, debugging strategies, or best practices.