{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/13725","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/13725/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/13725/comments","events_url":"https://api.github.com/repos/angular/angular/issues/13725/events","html_url":"https://github.com/angular/angular/issues/13725","id":198190353,"number":13725,"title":"Browser Memory isn't released when destroying components","user":{"login":"rmullins9","id":11447269,"avatar_url":"https://avatars1.githubusercontent.com/u/11447269?v=4","gravatar_id":"","url":"https://api.github.com/users/rmullins9","html_url":"https://github.com/rmullins9","followers_url":"https://api.github.com/users/rmullins9/followers","following_url":"https://api.github.com/users/rmullins9/following{/other_user}","gists_url":"https://api.github.com/users/rmullins9/gists{/gist_id}","starred_url":"https://api.github.com/users/rmullins9/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rmullins9/subscriptions","organizations_url":"https://api.github.com/users/rmullins9/orgs","repos_url":"https://api.github.com/users/rmullins9/repos","events_url":"https://api.github.com/users/rmullins9/events{/privacy}","received_events_url":"https://api.github.com/users/rmullins9/received_events","type":"User","site_admin":false},"labels":[{"id":375501288,"url":"https://api.github.com/repos/angular/angular/labels/comp:%20core%20&%20compiler","name":"comp: core & compiler","color":"c7def8","default":false},{"id":375497160,"url":"https://api.github.com/repos/angular/angular/labels/freq2:%20medium","name":"freq2: medium","color":"fbca04","default":false},{"id":375498203,"url":"https://api.github.com/repos/angular/angular/labels/severity3:%20broken","name":"severity3: broken","color":"0052cc","default":false},{"id":130606843,"url":"https://api.github.com/repos/angular/angular/labels/type:%20bug","name":"type: bug","color":"EEEEEE","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":31,"created_at":"2016-12-30T20:18:30Z","updated_at":"2017-07-17T16:56:52Z","closed_at":null,"body":"<!--\r\nIF YOU DON'T FILL OUT THE FOLLOWING INFORMATION WE MIGHT CLOSE YOUR ISSUE WITHOUT INVESTIGATING\r\n-->\r\n\r\n**I'm submitting a ...**  (check one with \"x\")\r\n```\r\n[X] bug report => search github for a similar issue or PR before submitting\r\n[ ] feature request\r\n[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question\r\n```\r\n\r\n**Current behavior**\r\n<!-- Describe how the bug manifests. -->\r\nWhen triggering ComponentRef.destroy(), no browser memory is ever released. Any injected dependencies are all still there and running, even though the component is gone.\r\n\r\nAlso:\r\nWhen bootstrapping an app within an iframe, destroying that app and removing the iframe from the DOM does not release browser memory.\r\n\r\nIn both of these scenarios, browser memory builds up over time and the browser tab and angular app lock up or crash. Injected dependencies are created, but never removed.\r\n\r\n**Expected behavior**\r\n<!-- Describe what the behavior would be without the bug. -->\r\nBrowser memory should be released as apps and components are destroyed.\r\n\r\n**Minimal reproduction of the problem with instructions**\r\n<!--\r\nIf the current behavior is a bug or you can illustrate your feature request better with an example, \r\nplease provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via\r\nhttps://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).\r\n-->\r\n*STEPS TO REPRODUCE*\r\n\r\nREPRODUCING DEPENDENCY LEAK\r\n1) Run the Tour of Heroes plnkr in Chrome or IE\r\nhttps://plnkr.co/edit/R9axXVtjep5VO8hWygpA?p=preview\r\n\r\n2) Open the js console and watch the logging in the hero service, which does not stop after destroying the app.\r\n\r\n- Note, this is the Tour of Heroes example, except that after the app is bootstrapped in main.ts, I've added a 15sec timer that runs ref.destroy(). Additionally, in the hero.service.ts file, I added a console log in the constructor that prints every second. You can see that the service continues to run even after triggering .destroy() on the component ref.\r\n\r\nREPRODUCING IFRAME LEAK\r\n1. Run the Tour of Heroes live example in IE 11\r\nhttps://angular.io/resources/live-examples/toh-6/ts/eplnkr.html\r\n\r\n2. Open F12 dev tools, click on Memory and click \"Start profiling to begin a performance session\"\r\n\r\n3. Make changes to the files by adding line breaks. Every time the app reloads in the iframe the memory will grow. After about 15 minutes of this the app will lock up due to the IE tab hitting the 1.5Gb memory limit. If you test with app that has more dependencies, it will lock up much faster.\r\n\r\nThis can be reproduced in Chrome too, it just takes longer for the memory leak to build up that much.\r\n\r\n**What is the motivation / use case for changing the behavior?**\r\n<!-- Describe the motivation or the concrete use case -->\r\nLarge-scale angular apps that use iframes or rely on destroying components will leak memory over time and eventually crash or lock up.\r\n\r\n**Please tell us about your environment:**\r\n<!-- Operating system, IDE, package manager, HTTP server, ... -->\r\nMac OS 10.11.6\r\n* **Angular version:** 2.0.X\r\n<!-- Check whether this is still an issue in the most recent Angular version -->\r\nAngular v2.4.1\r\n* **Browser:** [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]\r\n<!-- All browsers where this could be reproduced -->\r\n all\r\n* **Language:** [all | TypeScript X.X | ES6/7 | ES5]\r\nall\r\n* **Node (for AoT issues):** `node --version` =   \r\n"},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/315814057","html_url":"https://github.com/angular/angular/issues/13725#issuecomment-315814057","issue_url":"https://api.github.com/repos/angular/angular/issues/13725","id":315814057,"user":{"login":"mcgraphix","id":1789874,"avatar_url":"https://avatars2.githubusercontent.com/u/1789874?v=4","gravatar_id":"","url":"https://api.github.com/users/mcgraphix","html_url":"https://github.com/mcgraphix","followers_url":"https://api.github.com/users/mcgraphix/followers","following_url":"https://api.github.com/users/mcgraphix/following{/other_user}","gists_url":"https://api.github.com/users/mcgraphix/gists{/gist_id}","starred_url":"https://api.github.com/users/mcgraphix/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mcgraphix/subscriptions","organizations_url":"https://api.github.com/users/mcgraphix/orgs","repos_url":"https://api.github.com/users/mcgraphix/repos","events_url":"https://api.github.com/users/mcgraphix/events{/privacy}","received_events_url":"https://api.github.com/users/mcgraphix/received_events","type":"User","site_admin":false},"created_at":"2017-07-17T16:56:52Z","updated_at":"2017-07-17T16:56:52Z","body":"For anyone interested in somewhat of a \"solution\" here is my example project showing how you can get some of the memory back by clearing out some references on the window: https://github.com/mcgraphix/angular4-memory-hack"}}
{"actor":{"display_login":"mcgraphix"}}