Memory leak when using ngTemplateOutlet

[tsvetomir]

I'm submitting a ...

[x] bug report

Current behavior
I'm using ngTemplateOutlet in a similar way to render a table:

<template #cell1 let-dataItem>
  {{dataItem.field1}}
</template>

<table>
  <tr *ngFor="let dataItem of data">
    <td>
      <template [ngTemplateOutlet]="cell1" [ngOutletContext]="{ $implicit: dataItem }">
      </template>
    </td>
  </tr>
</table>

The heap size and node count grows uncontrollably when updating the data.

Expected behavior
The heap size and node count should remain fairly constant since we're only replacing their content.
Note that the application is running in production mode.

Minimal reproduction of the problem with instructions

1. Open this plunkr for 2.0.10 or this plunkr for 4.0.0.
2. Start your browsers memory profiler or observe the process memory usage
3. Notice that memory is not reclaimed

What is the motivation / use case for changing the behavior?
Application memory usage should be stable.

Please tell us about your environment:
Linux

• Angular version: 2.4.10, 4.0.0

• Browser: Chrome 57 | Firefox 52

• Language: TypeScript 2.0

[DaveMBush]

For the record, this happen in Windows (7) environment as well

[alexzuza]

Will this solve the problem?

ngOnDestroy() {
  if (this._viewRef) {
     this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._viewRef));
  }
}

Without ngOnDestroy

After applying the code above

https://plnkr.co/edit/ciBnuI1m6xYO9cyjj5zH?p=preview

[ericmartinezr]

related to #14919 ?

[tsvetomir]

@alexzuza it helps indeed :) Your version of ngTemplateOutlet does not leak memory:

@ericmartinezr maybe the references are kept by the template outlet and selecting them with @ContentChildren is not necessary for the leak to occur.

[tbosch]

Hi,
could you make a version that also destroys the component that contains the declaration place of the <template>?

[tsvetomir]

@tbosch I'm not sure what I should do. Should I move the templates to a sub-component?

[tbosch]

Yes, fixing ngTemplateOutlet is the right place.

[tbosch]

Thinking about this a bit more, I think we can fix this in a general way, without needing to change ngTemplateOutlet... Working on it...

[sgrinich]

Hi,

I'm wondering what the minimum version of Angular 2.x is needed to resolve this bug. Our application is using Angular 2.4.10 and I am hoping to fix this memory leak without needing to upgrade the app to Angular 4.

[tsvetomir]

@sgrinich upgrading from 2 to 4 shouldn't be too hard. Also 4.x is an LTS release.
Check out the Angular Update Guide for a summary of the necessary changes.

[sgrinich]

Ok, thanks @tsvetomir

[angular-automatic-lock-bot]

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.}