The performance of web API calls on an Angular 7 app deteriorates gradually with each subsequent call

My Angular application in C# is experiencing a slowdown when making calls to the web API and executing a stored procedure. While the C# code performs quickly, the 'Content Download' process is progressively slowing down with each call.

https://i.sstatic.net/EBKVE.png

The Angular service I use to call the web API is as follows;

getInvestorsToFunds(params): Observable<InvestorToFund[]> {  
    let body = JSON.stringify({ params });  
    return this.http.post<InvestorToFund[]>(this.baseUrl + 'api/Investor/getInvestorsToFunds', body)   
     .pipe(catchError(this.handleError));
 }

This service is called from my component like so;

 let x = forkJoin(  
  this.investorService.getInvestorsToFunds(params)
).subscribe(t => { 
  this.investorToFunds = t[0] as InvestorToFund[]; 
});

Do you have any insights on why the performance of each call deteriorates steadily over time?

Answer №1

After researching memory leaks and utilizing Chrome tools for snapshots, I discovered an issue leading to increased memory usage with each page hit. This ultimately affected the performance of my app by limiting data input from the API.

The culprit turned out to be a plugin - https://github.com/inorganik/countUp.js-angular2. Upgrading from version 6 to version 7 resolved the memory leak problem, resulting in faster API calls taking only about 3 seconds regardless of the number of pages clicked.

Here are some helpful articles:

https://auth0.com/blog/four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/ https://developers.google.com/web/tools/chrome-devtools/memory-problems/

Answer №2

To prevent memory leaks, it is important to unsubscribe from subscriptions.

class A implements OnDestroy {
    protected ngUnsubscribe: Subject<void> = new Subject<void>();

    ngOnDestroy() {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
    }

Remember to unsubscribe from EACH subscription like this:

  this.subscription.takeUntil( this.ngUnsubscribe ).subscribe( _ => _ );

By doing this, when you navigate away from a component, the ngOnDestroy function will clear all subscriptions from memory.

PS. I faced a similar issue in the past but implementing this solution resolved it perfectly. Now everything runs smoothly without any problems.

Answer №3

Can anyone figure out why the response time of each call keeps decreasing?

The slowdown you're experiencing is due to a decline in the backend's performance. No matter what modifications you make to the frontend, it won't improve the speed.

Solution

The solution lies in addressing the issues with the backend 🌹

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 9 - Refresh page while redirecting to the same URL, triggering only the API call specific to the current page

Is there a way to redirect to the same URL and also refresh the page without calling all APIs from the beginning of the application? I have attempted using an anchor tag with href, but it results in refreshing the entire page and fetching all APIs again. I ...

Angular Universal's SSR causing a double page load event

Within my main code (app.component.html), there are no higher level NgIf statements that would trigger a reload. To prevent requests from being called after SSR sets the answers of public URLs, I am utilizing transferstate. I am also using isPlatFormBrows ...

The functionality of OnSelectedIndexChanged appears to be non-responsive

I am encountering some challenges in achieving the desired functionality with my code, and I would greatly appreciate any assistance you can provide. My goal is to: Enter a product name in a textbox and create an object with that name. Add the product o ...

Encountered error: Unable to locate module - Path 'fs' not found in '/home/bassam/throwaway/chakra-ts/node_modules/dotenv/lib' within newly generated Chakra application

Started by creating the app using yarn create react-app chakra-ts --template @chakra-ui/typescript. Next, added dotenv with yarn add dotenv Inserted the following code block into App.tsx as per the instructions from dotenv documentation: import * as dote ...

Currently in motion post file selection

I am currently facing an issue with a button that triggers a file selector pop-up. Below is the code snippet: <button mat-raised-button (click)="inputFile.click()">Choose a file</button> <input #inputFile type="file" [style.display]="' ...

Utilizing Vuetify in Typescript: Making Use of Data() Properties

ie data() { return { bar: false rules: { foo: (value) => { if (this.bar) {} } } } } The code is functioning correctly. What steps can be taken to help typescript comprehend this? If this is considered a " ...

Error encountered while waiting for Angular to finish loading in Protractor: ScriptTimeoutError - Task: Protractor.waitForAngular()

Yesterday went smoothly, but today after updating to pull all commits from svn, everything stopped working. Every time I run a test, I encounter this error: ScriptTimeoutError: script timeout And: From: Task: Protractor.waitForAngular() - Locator: By(c ...

Displaying a component inside a different component

I'm attempting to display components inside another component, but even when I try to include div elements within the component, they don't show up. const DisplayComponent = () => { return ( <div> <DisplayContent ...

I am unable to transmit information using the `http.post` function

When attempting to send a post request to the backend, I am receiving a response code of 500 and an empty data object on the API side. Interestingly, using Postman gives successful results. return http.post(link,data,headers).subscribe(response=>{ ...

The "rest" variable is automatically assigned the type of "any" because it lacks a specified type and is used within its own initializer

Attempting to set up a private route using react router 4 and Typescript. Check out the code I'm working with: type CustomRouteProps<T> = T & { component: any, authRequired: boolean }; function PrivateRoute({ component: Component, authRequ ...

Having difficulty extracting text from an element without tags using Selenium Webdriver

Having trouble extracting the text of an untagged element in Selenium C#? Look at this attached screenshot - I'm trying to grab the text Adell Windler. Despite using Absolute XPath, Relative Xpath, and cssSelector, all I'm getting is the text Nam ...

Tips on dynamically naming form controls based on user input

I am working on creating a JSON object using Angular 8 forms, where the control name will be defined by the user through a text input field. This control will contain formArrays of unit and price elements, allowing users to add as many unit-price combinati ...

Leveraging the power of the Microsoft Graph API to retrieve upcoming events from Outlook

Apologies for the broad nature of this question, but it accurately reflects the task at hand. Within my organization, I am working on consolidating events from specific individuals' calendars and integrating them into a shared calendar. Essentially, ...

Tips for retrieving the most recent UI updates after the container has been modified without the need to refresh the browser

Currently, I have developed a micro frontend application in Angular using module federation. This application is hosted in production with Docker containers. My main concern revolves around how to update the UI changes for the user without them needing to ...

Issue with Angular currency code incompatibility on outdated Angular version

I am currently on Angular 7.3.x and unfortunately updating is not an option at the moment. I'm curious if this version limitation could be causing my issue. In essence: {{ value | currency:'USD' }} shows me $ {{ value | currency:'EUR ...

Executing a bulk SQL stored procedure in C# using a single call

Is there a way to call multiple stored procedures in bulk, similar to using a bulk copy operation? The stored procedure only consists of 8 selects to check for unique constraints and 8 inserts, without returning any values. ...

Even though the model value is set to true, the material check box remains unchecked

My mat-table contains data and checkboxes. The checkboxes should only be checked when the element.select property is true. However, when I use [(ngModel)]="element.select", all the checkboxes end up getting checked. Below you can find the code snippet: &l ...

Show a modal component from another component in Angular 2

As a newcomer to Angular, I'm working on a modal component that changes from hiding to showing when a button with (click) is clicked. The goal is to integrate this modal into my main component, allowing me to display the modal on top of the main conte ...

Utilizing the Kraken.com API to create a message signature with AngularJS

I'm currently tackling Angular2 and for my first project, I want to tap into the Kraken.com API. (I know, I could have chosen an easier task :) The "Public" calls are working smoothly, but I've hit a snag with the "Private" methods. (Those requi ...

The publish-subscribe feature appears to be ineffective

Recently starting with meteor, I learned about the importance of removing autopublish. So, I decided to publish and subscribe to a collection in order to retrieve two different sets of values. Here is the code on my meteor side: Meteor.publish('chann ...