Memory leak in first rx-operator #6905
Description
Bug, feature request, or proposal:
Components using first operator can cause serious memory leaks since they block Angular to garbage collect instances of components, modules, etc.
Example: create a simple angular 4.3.6 (latest) application using 2 routes (login and main with their own module, etc). Add a button on each of those views to go back and forth the login and main route.
If you use a plain html button, you can memory-profile the application and instances of both components are set to 1 (correct result). Angular, the router and Chrome GB can correctly free extra/uneeded/destroyed instances.
If you add mdTooltip='test' to any of the buttons (choose Login or Main), you will notice that instances are incremented every time you go back and forth the login and main screen.
We have done quiet a big research on this issue (since memory management and control is key in our/everyones project) and we have found that commenting the lines like:
"...first.call(this._ngZone.onMicrotaskEmpty).subscribe((..."
...are fixing the issue in most cases.
What is the expected behavior?
Once we move away from a Route, the Angular component is destroyed and every single trace of Material inside of every template, etc that belongs to this route should also be disposed.
What is the current behavior?
When using (i.e) mdTooltip in any button that belongs to a template/module/route that is being disposed, the component cannot be disposed and the instance remains in any memory snapshot.
What are the steps to reproduce?
Explained above.
What is the use-case or motivation for changing an existing behavior?
Memory leaks are important
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Tested on:
Angular: 4.3.6
Chrome: 60.0.3112.113 (Build oficial) (64 bits)
TypeScript: 2.3.3
OS: Windows 10
Is there anything else we should know?
This bug is affecting some other components.
We can provide external zip focused on this issue.