4

In angular application, every time I route to a new page, my earlier page's component is staying in memory. It's not getting destroyed and when I route back to that page it creates a new instance.

Application is not created through angular CLI. It's a custom build application using the webpack configuration provided on angular website. Actually, I am doing performance improvement of the existing angular application and this demo app I created for isolation of issue.

Github https://github.com/bytesofdhiren/angular-memory-issue

Basically, every time I route to home or register page, the application creates a new instance of the register component and home component. It's not destroying the earlier created component.

enter image description here

Dhiren
  • 592
  • 5
  • 16

2 Answers2

0

Actually, I tried running the above Github application in production mode and the issue got resolved. But the actual issue in my production application still exists. But that is related to something else. I will post a new question for that.

Dhiren
  • 592
  • 5
  • 16
-3

Every component has a lifecycle you need to use:

OnDestroy();

and you need to implements the method ngOnDestroy(). Follow this

Doflamingo19
  • 1,591
  • 4
  • 12
  • 32
  • question is what will you destroy there? Please have a look at GitHub repo I shared in a statement. I already tried ngOnDestroy() { console.log('do nothing'); }. Destroy is getting called, but still, RegisterComponent is staying in memory. – Dhiren May 28 '19 at 11:24
  • 1
    This response is not helpful: implementing `OnDestroy`/`ngOnDestroy()` is not needed for the the component to be destroyed, it rather allows you to do some stuff **when** it will be. – Tazaf Oct 10 '22 at 11:44