#Why is my Angular application is storing/adding data to memory every POST call

13 messages · Page 1 of 1 (latest)

rapid plinth
#

I have an Angular application in which as soon as someone goes on to it, it grabs all the data it needs for the entire application and then shares it across all it's components (I realize there's two different ways to approach it, but I think grabbing it all at once vs. Just In time makes sense). Anyway, I notice when I click home (which causes a reload of the application, and thus grabs all the data again), the memory usage on my application jumps consistently?

Here is my service.ts:

private allWebsiteInformation = httpResource<AllWebsiteInformationModel>(() => this.allWebsiteInformationUrl);

 allWebsiteInformationTwo = computed(() => {
    return this.allWebsiteInformation.value();
  });

And then throughout each component I do:

  homeInfo = this.dataService.allWebsiteInformationTwo;

I then have this code that calls /home:

<a href="/home">

But is this normal for my application to constantly get a bigger memory heap everytime I refresh the application? I thought angular would just cache the call and then thats it.

If you look at my screen shots, it starts at 253MB, then just after a few refreshes its at 330MB? Do I need to add an RxJS operator?

image.png image.png
rapid plinth
#

Angular application is constantly caching data from backend?

#

Why is my Angular application is storing/adding data to memory every POST call

small crater
# rapid plinth I have an Angular application in which as soon as someone goes on to it, it grab...

Firstly, you should use routerLink in Angular, not href. Otherwise you get none of the benefits of an SPA-Framework. Instead you're making the browser re-parse and re-execute all theJavascript again and Angular has to rebuild the entire DOM from scratch. Your Angular app starts up from scratch on every navigation like this. With routerLink your Angular app stays alive and you only navigate within it - an SPA 🙂

That said, Angular does not preserve data between "hard reloads" like you're suggesting. I suspect the memory usage goes up because the browser's JavaScript engine is caching things, not Angular. Does it keep increasing?

rapid plinth
small crater
#

That is very weird.

kind goblet
#

reload Should reduce memory. But clicking on href is different, may add a state to window.history, hence may take up more memory. You may even see "This app was restored from back/forward cache" if eligible

rapid plinth
#

yeah it's very strange. I don't know why it's doing it to be honest. I had it as a a href for /home because I was testing something on reload and noticed it bog down super bad. But Signals are handling all my state and so it was very strange to see it keep increasing.

rapid plinth
small crater
#

Sounds like you're using swiperjs wrong. 😂

rapid plinth
small crater
#
  • Use viewChild to grab the Swiper div.
  • Use afterNextRender in your component constructor to wait for Angular to render your component's template.
  • In the ANR callback, just initialize Swiper as normal: https://swiperjs.com/get-started#initialize-swiper. Make sure you pass the native Element from the viewChild instead of a class selector.
  • Use DestroyRef or ngOnDestroy to destroy Swiper.
rapid plinth