I have a problem with Ionic 6 and ion-button. I use tabs and when I go to nested page and then click on back button page doesn’t clear memory and I have memory leaks. I happens if I pass ion-button into ng-content. Such error happens even I just put native html button
I have the very simple test-component
@Component({
selector: 'app-test-cmp',
templateUrl: '<ng-content></ng-content>',
})
export class TestCmp {}
Here is my nested page
@Component({
selector: 'app-test-page',
templateUrl: `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Test</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<app-test-cmp><ion-card>anything here</ion-card></app-test-cmp>
<ion-content>`,
})
export class TestPage {}
This code works well. Here is my memory snapshot.
But if I put ion-button into app-test-cmp memory doesn’t clear.
@Component({
selector: 'app-test-page',
templateUrl: `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Test</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<app-test-cmp><ion-button>Ionic button</ion-button></app-test-cmp>
<ion-content>`,
})
export class TestPage {}
Here is memory snapshot
It’s somehow connected to ion-content
This code works correctly but crash animation, etc.
@Component({
selector: 'app-test-page',
templateUrl: `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Test</ion-title>
</ion-toolbar>
</ion-header>
<app-test-cmp><ion-button>Ionic button</ion-button></app-test-cmp>
<ion-content>
......
<ion-content>`,
})
export class TestPage {}
Also it happens only if Chrome device emulator is enabled. If I’m testing as desktop browser it works well.
Here you can try it by yourself https://so-65135988-cswh8j.stackblitz.io/home (just go between details page and back several times and compare memory allocation when emulation enabled and disabled)
Code Memory leaks problem - StackBlitz