Is @UntilDestroy() always required for Angular 9/Ivy? about until-destroy HOT 5 CLOSED

It seems like a bug in the migration script. Please share one example code so we can investigate. And yes, you must add the decorator anywhere you use untilDestroyed.

from until-destroy.

I can't seem to get it to work with Angular 9.

Example:

class Tab implements OnInit, OnDestroy {
	constructor() {	}

	ngOnInit() {
		interval(5000)
			.pipe(untilDestroyed(this))
			.subscribe(() => { console.log('ping from Tab...'); });
	}
	
	ngOnDestroy() {	
		console.log(`Tab.ngOnDestroy`);	
	}
}

@UntilDestroy()
@Component({ ... })
export class FirstTab extends Tab implements OnInit, OnDestroy {
	constructor() {	}

	ngOnInit() {
		super.ngOnInit();
		interval(5000)
			.pipe(untilDestroyed(this))
			.subscribe(() => { console.log('ping from FirstTab...'); });
	}
	
	ngOnDestroy() {	
		super.ngOnDestroy();
		console.log(`FirstTab.ngOnDestroy`);	
	}
}

@UntilDestroy()
@Component({ ... })
export class SecondTab extends Tab implements OnInit, OnDestroy {
	constructor() {	}

	ngOnInit() {
		super.ngOnInit();
		interval(5000)
			.pipe(untilDestroyed(this))
			.subscribe(() => { console.log('ping from SecondTab...'); });
	}
	
	ngOnDestroy() {	
		super.ngOnDestroy();	
		console.log(`SecondTab.ngOnDestroy`);
	}
}

 // Included in FirstTab
@UntilDestroy()
@Component({ ... })
export class Widget implements OnInit, OnDestroy {
	constructor() {	
	}

	ngOnInit() {
		super.ngOnInit();
		interval(5000)
			.pipe(untilDestroyed(this))
			.subscribe(() => { console.log('ping from Widget...'); });
	}
	
	ngOnDestroy() {	
		super.ngOnDestroy();	
		console.log(`Widget.ngOnDestroy`);
	}
}

When I bounce back and forth between tabs, I see the '{name}.ngOnDestroy' statements for all classes. However, only the interval for the Widget is cleaned up. The intervals for the Tabs are never cleared. Instead, new ones are created. If I bounce back and forth a few times times, I end up with 10+ ping statements.

I didn't have any problems before switching to Angular 9 and '@ngneat/until-destroy' (from 8 and 'ngx-take-until-destroy').

I tried adding @UntilDestroy() to the base Tab class, but I get this error:
Uncaught TypeError: Cannot read property 'onDestroy' of undefined
at decorateDirective (:96852:45)

Any ideas what I'm doing wrong?

Does untilDestroyed no longer support classes / components that use inheritance?

Edit:
I tried moving all the logic from my base Tab class into my actual tab and removing the 'extends Tab'. Sure enough, my observables started getting cleaned up.

from until-destroy.

Okay, looks like someone else already fixed this in a different branch:
typescriptguru@b55b735

Any idea when this change will make it into the npm module?

from until-destroy.

You're welcome to submit a PR

from until-destroy.

Regarding the migration, it works only on Component/Directives. In your case, it's a simple class.

from until-destroy.