Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Application stays in memory even after being destroyed

See original GitHub issue

Which @angular/* package(s) are the source of the bug?

platform-browser

Is this a regression?

Yes

Description

I am not sure of the source module but it is from Angular application.

I have created a basic Angular application using ng new command. Then I only modify the app.component.ts file. The same is written below:

`import { Component, HostListener, OnDestroy } from ‘@angular/core’; import { platformBrowser } from ‘@angular/platform-browser’;

@Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls: [‘./app.component.css’] }) export class AppComponent implements OnDestroy { ngOnDestroy(): void { console.log(‘ngOnDestroy called’); } @HostListener(‘window:message’,[‘$event’]) onMessage(e:any) { console.log(e); if(e[“data”] == “close”) this.closeForm(); } closeForm() { platformBrowser().destroy(); } title = ‘demo’; } `

I have made a index.html file which is being served by IIS. On pressing add the angular application is being loaded inside an iframe and on pressing remove button the application is being destroyed and iframe is removed from DOM.

The content of index.html file which is being served by IIS is written below:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body style="width: 100vw; height: 100vh;"> <div id="a"></div> <button onclick="add()">Add</button> <button onclick="remove()">Remove</button> </body> <script> function add() { let body = document.getElementById('a'); let rand = Math.floor(Math.random() * 1000); // body.innerHTML = `<iframe src="http://localhost/app5/#/?_dc=${rand}" title="Miscellaneous Entry Form" id="miscEntFrm" style="width:100%; height:99%; border:none;"></iframe>`; // body.innerHTML = `<iframe src="http://localhost/app1/#/misc?userId=125334675" title="Miscellaneous Entry Form" id="miscEntFrm" style="width:100%; height:99%; border:none;"></iframe>`; body.innerHTML = `<iframe src="http://localhost:4200" title="Memory Leak Demo" id="miscEntFrm" style="width:100%; height:99%; border:none;"></iframe>`; } function remove() { document.getElementById('miscEntFrm').contentWindow.postMessage("close", "*");

    setTimeout(() => {
        let frame = document.getElementById('miscEntFrm');
        //frame.contentWindow.location.reload();
        frame.src = 'about:blank';
        frame.remove();
        frame = undefined;
    }, 1000);
}

</script> </html>

But the thing is, when observing memory tab performance monitor I notice that heap memory is constantly increasing when adding and removing the angular application along with iframe. Along with heap memory there is also an increase in DOM nodes, document and event listeners which decrease to some extinct but equals the previous number.

I have also build the app for production but the issue is still there.

memory leak heap snapshot

Please provide a link to a minimal reproduction of the bug

https://github.com/rajib-g/MemoryLeakDemo.git

Please provide the exception or error you saw

OnDestroy called but application not releasing resources.

Please provide the environment you discovered this bug in (run `ng version`)

Angular CLI: 13.3.6
Node: 16.15.0
Package Manager: npm 8.5.5
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1303.6 (cli-only)
@angular-devkit/core         13.3.6 (cli-only)
@angular-devkit/schematics   13.3.6 (cli-only)
@schematics/angular          13.3.6 (cli-only)

Anything else?

We are developing a hybrid application where the angular application should be inside an iframe. If you need any other information please let me know.

Issue Analytics

State:
Created a year ago
Comments:15 (6 by maintainers)

Top GitHub Comments

1reaction

rajib-gcommented, Jun 30, 2022

@AndrewKushnir Yes commenting out all of the console.log solves the issue. You are right that MessageEvent instance has the source property that points back to the window in the child <iframe> and that was creating the memory leakage.

Thanks for pointing out the actual issue.

I have seen various Github threads regarding memory leakage and I thought there is a high probability that this might be a regression. Some of those Github threads is given below:

Again thanks a lot for helping me to solve the issue.

0reactions

angular-automatic-lock-bot[bot]commented, Jul 31, 2022

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Top Results From Across the Web

Application stays in memory even after being destroyed #22106

When the platform is destroyed, the DOM node is removed but the application still exists in memory. This is easily verified by taking...

Angular Application stays in memory even after being destroyed

I know that ngOnDestroy is only fired when the class which it has been implemented on is destroyed within the context of a...

Preventing and detecting memory leaks in Android apps

Memory leaks can cause your Android app to crash, causing frustration and lower usage. Learn how to fix them in this guide.

Everything you need to know about Memory Leaks in Android.

The first category, application terminations (permanent), is self-evident: when an app is terminated, the GC releases all of the memory that the app...

Detached window memory leaks - web.dev

Detached windows are a common type of memory leak that is particularly difficult to find and fix.