I work with @xtephan, on the same project, so i can attempt to answer that.

We have a custom subsink, that overwrites the ngDestroy method to allow us to cleanup subscriptions when a component is destroyed. The subsink works by assigning to a property directly on the object, and keeping a reference to the old method, so we can call the onDestroy. So in relation to what is said on the linked issues, specifically here: https://github.com/angular/angular/issues/7270#issuecomment-201137617, the onDestroy method is there in the original class definition, as can also be seen in the sample provided.

Subsink code:

import { Unsubscribable } from 'rxjs';
import { OnDestroy } from '@angular/core';
import { onNgOnDestroy } from './hooks';

export class SubSink {
  private _subs: Unsubscribable[] = [];

  /**
   * @param component - The component to link the unsubscription to
   */
  public constructor(component: OnDestroy) {
    onNgOnDestroy(component, () => this.unsubscribe());
  }

  /**
   * Adds a single subscription to the sink
   * @param subscription
   */
  public set sink(subscription: Unsubscribable) {
    this._subs.push(subscription);
  }

  /**
   * Adds some subscriptions to the sink
   * @param subcriptions
   */
  public add(...subcriptions: Unsubscribable[]) {
    this._subs.push(...subcriptions);
  }

  public unsubscribe() {
    for (const sub of this._subs) {
      sub.unsubscribe();
    }
    this._subs = [];
  }
}

hooks.ts:

import { OnDestroy } from '@angular/core';

export function onNgOnDestroy(destroyable: OnDestroy, cb: () => void) {
  const original = destroyable.ngOnDestroy;
  destroyable.ngOnDestroy = () => {
    cb();
    original.apply(destroyable);
    destroyable.ngOnDestroy = original;
  };
}

The way the hook is implemented, we can layer multiple on destroy hooks, without them getting in the way of each other, since they will all be called.

The subsink is then used in a component like this:

export class MyComponent implements OnInit, OnDestroy {
   private sink = new SubSink(this);

  ngOnInit() {
     const myObs = /* Something that gets an observable */
     this.sink.sink = myObs.subscribe();
  }

  ngOnDestroy() {
   // Can be left empty if no other teardown is required
}
}

An alternative we have discussed internally as a solution for this specific regression, is making the SubSink an injectable service (With a unique instance for each component instance), and then relying on ngOnDestroy being called on the service. This however then requires that we explicitly pass the SubSink in the provider array of every single component we have. To avoid forgetting to do that, we will need to write a custom lint rule to check that. All in all, quite a bit of work to get around Angular not “observing” the normal rules of how “methods” works in javascript, and instead relying on the method only being defined on the prototype.

@juanmendes Here you go: https://gist.github.com/zlepper/df282c06bafe46342d5b43f4e049726a It needs to be compiled and such from the TS version, but i figure you can handle that part? 😃

@flash-me I’m not sure how your example matches the SubSink example, you are being forced to call unsubscribe yourself. Their example automatically unsubscribes from ngOnDestroy? Or are you just suggesting a different approach to implement the SubSink?

Additionally adding subscriptions to other subscriptions also causes those subscriptions to be cancelled, if the first subscription completes (At least it did last i tried).

@juanmendes We ended up using a component scoped service instead:

@Injectable()
export class SubSinkService implements OnDestroy {
  private _subs: Unsubscribable[] = [];

  /**
   * Adds a single subscription to the sink
   * @param subscription
   */
  public set sink(subscription: Unsubscribable) {
    this._subs.push(subscription);
  }

  /**
   * Adds some subscriptions to the sink
   * @param subcriptions
   */
  public add(...subcriptions: Unsubscribable[]) {
    this._subs.push(...subcriptions);
  }

  public unsubscribe() {
    for (const sub of this._subs) {
      sub.unsubscribe();
    }
    this._subs = [];
  }

  ngOnDestroy(): void {
    this.unsubscribe();
  }
}

Turns out Angular calls the OnDestroy method on services if they are scoped. So we add the service to our component providers if we need it, then dependency inject it. Then we additionally have a ts-lint rule to make sure you actually remember to add it to providers, and doesn’t accidently use the parent’s subsink. It’s a bit more involved, but we still get the behavior we want, even though it’s nowhere near as nice as it used to be.