ignite control not garbage collected after component destroyed

Currently we are trying to develop application with angular4 with ignite ui, and we use Angular4 router with ignite ui controls, we found that ignite ui control may not be correctly garbage collected after component was destroyed.

the reproduce repo is attached. to reproduce

1. ng serve
2. click Add in the top menu
3. click Home in the top menu
4. repeat 2-3

And the memory will continue to increase even I force GC. And I compare the Heap, the HTMElement was not garbage collected.

And if I use the ig-date-picker in addContactscomponent in addcontact.component.html Line 68, if I change it to normal input, everything work fine.

Please help! Thank you!

Update, use a more simple demo with only one ignite-text-editor ig_memory.zip

Update 7/6

I just compared the chrome heap snapshot, and the ig-text-editor component was increased continually when I click Add page, it seems the ignite component was still hold by angular. should I remove the listener or subscriber in ngOnDestroy()?

Update 7/6

1. I add the following code in ngOnDestroy

    @ViewChildren(IgDatePickerComponent) dates: QueryList<IgDatePickerComponent>; 

    ngOnDestroy() {
       dates.forEach(date => date.destroy())
    }

Memory leak is improved, but not resolved.

1. I look into the compare heap, and found the leak add more code in ngOnDestroy,

And found some listener are not destroyed, so I add more codes to remove listeners

   ngOnDestroy() {
        console.log('destroyed');
        if (this.dates) {
            this.dates.forEach(date => 
            {
                const el = (date as any)._el;
                              $(el).off('igdatepickervaluechanged')
                $(el).off('igdatepickerblur')
                $(el).off('igdatepickerselected')
                $(el).off('igdatepickerrendering')
                $(el).off('igdatepickerrendered')
                $(el).off('igdatepickermousedown')
                $(el).off('igdatepickermouseup')
                $(el).off('igdatepickermousemove')
                $(el).off('igdatepickermouseover')
                $(el).off('igdatepickermouseout')
                $(el).off('igdatepickerfocus')
                $(el).off('igdatepickerkeydown')
                $(el).off('igdatepickerkeypress')
                $(el).off('igdatepickerkeyup')
                $(el).off('igdatepickervaluechaning')
                $(el).off('igdatepickerdropdownlistopening')
                $(el).off('igdatepickerdropdownlistopened')
                $(el).off('igdatepickerdropdownlistclosed')
                $(el).off('igdatepickerdropdownlistclosing')
                $(el).off('igdatepickerdropdownitemselected')
                $(el).off('igdatepickerdropdownitemselecting')
                $(el).off('igdatepickertextchanged')
                $(el).off('igdatepickeritemselected')

                $(el).off()
                date.destroy()
            });
        }
        this.dates = null;

    

It seems this can remove all listeners, but maybe different editor have different listeners. so maybe we should add the off() logic in IgControlBase.ngOnDestroy()/

[kdinev]

@JiaLiPassion Seems to me that there may be a problem, not only with the missing ngOnDestroy which we will correct but also with the editor’s destroy.

@bazal4o Could you look at the editor’s destroy to see why there event handlers remain?

[JiaLiPassion]

@kdinev, thank you!