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.