Memory Leak on Modals after dismiss

[doug1e]

Bug Report

Ionic version:

[x] 4.0.0-beta.13

Current behavior:

When Modal (pop up) is displayed and then dismissed, it leaved Detached HTMLElement (memory leaks) behind.

Expected behavior:

Modal dismiss should clean up the memory allocation

Steps to reproduce:

The sample given at the docs is enough to produce the problem. When you have larger components used as the base for the modal, the issue becomes more dramatic.

Related code:

The code to launch the modal:

export class HomePage {
constructor(public modalController: ModalController) {
}

async presentProfileModal() {        
    const modal = await this.modalController.create({
        component: TestModalComponent,
        componentProps: { value: 123 }
    });

    await modal.present();
}         

}

Please find the component code below. The only added method is related to modal dismiss.

closeModal() {
this.modalController.dismiss();
}

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI) : 4.2.1

System:

   NodeJS : v8.9.4
   npm    : 6.4.1
   OS     : Windows 7

[manucorporat]

Can you please follow the issue template? Ionic 4.2.1 is not the ionic version, but the CLI version

[doug1e]

Apologies about the template; I edited the report.

[manucorporat]

@Doehl we might already fixed this issue in master, next version should have it

[paulstelzer]

@doug1e I leave this open for needs reply so you can check with the next beta which is coming soon if the problem is solved and then it would be great if you can close this issue if it's fixed :)

[manucorporat]

Good idea @paulstelzer

[doug1e]

I will, many thanks for all your help. I do appreciate it

[godenji]

check with the next beta which is coming soon

When is the next beta coming? Quite a few commits against master, hoping to test out latest fixes/improvements this week.

[paulstelzer]

If you can't wait, just fork and build the repo :) There are many new features and fixes. We hope to release beta.18 soon :)

[brandyscarney]

4.0.0-beta.18 has been released, could you please test this and let us know if it's still an issue? Thanks!

[doug1e]

Many thanks for your answers.

I might be doing something wrong but I updated to 4.0.0-beta.19 and I still see the same behavior.

[paulstelzer]

I cannot see something wrong in your screenshot. Where do you see the memory leak??

[doug1e]

Hi Paul,

Many thanks for your reply and congrats on the RC release.

As far as I know the Detached HTMLElement is a memory leak, which can be seen at the screenshot.
I can also replicate a similar behavior with ToastController sample code.

I believe, these leaks may easily add up during the life of the app.

Cheers,

Doug

[doug1e]

Hi ionic team,

I wish you and your loved ones a wonderful 2019.

I was wondering if this bug is planned to be fixed before the production version. My app uses toast messsages and popups quite a bit; hence, the memory leaks issue is a bit of a concern for me...

Cheers,

Doug

[manucorporat]

Happy new year @doug1e!
are you using stencil or ionic/angular?

[doug1e]

Hi Manu,

I use ionic/angular

Cheers,

Doug

[doug1e]

Hi ionic team,

Is there anything I can do to help with the debugging of this issue?

Cheers,

Doug

[doug1e]

Hi @manucorporat ,

Congrats on the ionic 4 release and thank you so much for the hard work.

I have been working on a project that uses modals and toasts so I was wondering how you prioritize this bug. Do you think it will be looked at soon? The reason why I am asking this is to figure out whether to publish my app now... Although memory leaks causes issues, I am not sure how long I need to wait so wanted to check with you.
Any pointer would be greatly appreciated.

Thanks again for your time on this and for the ionic 4 release.

Cheers,

Doug

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!