w11k / ngx-componentdestroyed

Unsubscribe from Observables in Angular Components

Unsubscribe from Observables in Angular

This library provides utility methods which help to unsubscribe from ReactiveX's Observables in Angular applications.

If you already use this library and want to use it with Angular 9: Please check the Migration Guide.

Why?

Failing to unsubscribe from observables will lead to unwanted memory leaks as the observable stream is left open, potentially even after a component has been destroyed or the user has navigated to another page.

Important: If services are used in Hierarchical Dependency Injectors they are affected by the same memory-leak issue!

This blog post provides additional information:

https://medium.com/thecodecampus-knowledge/the-easiest-way-to-unsubscribe-from-observables-in-angular-5abde80a5ae3

Patrons

❤️ W11K - The Web Engineers

❤️ theCodeCampus - Trainings for Angular and TypeScript

First: Check your Angular version!

If you are using Angular <= 8 or Angular 9 with ViewEngine instead of Ivy, you have to use a previous version of this library. Please see ViewEngine usage for further instructions. If you are using the latest Angular version and if you have no idea what ViewEngine or Ivy is, just continue with the instructions below.

Demo

@Component({
    selector: 'foo',
    templateUrl: './foo.component.html'
})
export class FooComponent 
            extends OnDestroyMixin                  // <--- 1. extend OnDestroyMixin 
            implements OnInit { 

    ngOnInit() {
        interval(1000)
            .pipe(
                untilComponentDestroyed(this)       // <--- 2. use the pipe operator
            )
            .subscribe();
  }

}

The TypeScript compiler will check that your component extends OnDestroyMixin when you try to use untilComponentDestroyed.

Installation

Download the NPM package

npm i --save @w11k/ngx-componentdestroyed

Usage

Prepare the class

Your component class must extend OnDestroyMixin:

import {OnDestroyMixin} from "@w11k/ngx-componentdestroyed";

@Component({
    selector: 'foo',
    templateUrl: './foo.component.html'
})
export class FooComponent extends OnDestroyMixin {  // <--- HERE 
    ...
}

Use the pipe operator

Either use

• untilComponentDestroyed(this)
• takeUntil(componentDestroyed(this))

as the last Observable pipe operator.

import {interval} from "rxjs";
import {takeUntil} from "rxjs/operators";
import {untilComponentDestroyed} from "@w11k/ngx-componentdestroyed";


interval(1000)
    .pipe(
        untilComponentDestroyed(this)               // <--- HERE
    )
    .subscribe();

Be careful with implementing ngOnDestroy()

If the component implements ngOnDestroy(), it must call super.ngOnDestroy() within the method body.

Migration guide 4.x.x -> 5.x.x

1. The component class has to extend OnDestroyMixin (import from @w11k/ngx-componentdestroyed).
2. If the component class has a constructor (very likely), you have to call super() at the beginning. The TypeScript compiler will complain if you don't.
3. You must either remove the existing ngOnDestroy() method (if empty, recommended) or call super.ngOnDestroy() within.

TSLint rule

Our sister project @w11k/rx-ninja provides a TSLint rule to enforce the use a terminator operator. If you want to use untilComponentDestroyed(this) instead of takeUntil(componentDestroyed(this)) please add this configuration to your tslint.json file:

{
  "rulesDirectory": [
    "node_modules/@w11k/rx-ninja/dist/tslint_rules"
  ],
  "rules": {
    "rx-ninja-subscribe-takeuntil": [true, "takeUntil", "untilComponentDestroyed"]
  }
}

A note on Ivy, ViewEngine, AoT on/off, Karma, Jest, ...

We tried everything but the current state of Angular's Ivy compilation is a f@#!ing nightmare:

• Base classes do not work with ViewEngine
• Ivy doesn't work with patching at runtime (this library version <= 4)
• Decorator tricks rely on Angular internals and will break in the future ...
• ... they don't work with Karma or Jest
• ... but even if the don't break, they don't work with AoT compilation turned off

ngx-componentdestroyed's Issues

New implementation for Angular Ivy is not working when OnDestroy was implemented in component

I understand that we have changed the implementation for untilComponentDestroyed for Angular9 Ivy because Ivy collects all lifecycle methods at the beginning of the component creation and we cannot override ngOnDestroy dynamically.

However there is an issue with the new class implementation: If the component in which we use untilComponentDestroyed operator has already implemented OnDestroy, the implementation in that component will override the implementation in OnDestroyMixin, causing the observable not to complete.

What if your component already extends a class?

Thank you for this library.

I would like to ask how to handle the scenario where a component already extends another class and where that parent class cannot extend OnDestroyMixin? E.g.:

@Component({/*...*/})
class ExampleFormComponent extends TypedForm<Example> {
    // ...
}

Obviously, this just worked in previous versions of this library because there was no inheritance required.

If this is/should not be possible with this library, please say.

Possible issue in upcoming Angular V6

Just been having a play with angular v6 and get a lot of errors relating to ng2-rx-componentdestroyed

If it's just used on it's own it's fine i.e

.pipe(untilComponentDestroyed(this))

but when used with another operator I get errors i.e

    this.route.params
      .pipe(
        untilComponentDestroyed(this),
        switchMap((params: any) => {
          return this.service.findOne(params['id']);
        })
      )
      .subscribe();

which gives an error of

Argument of type '(source: Observable<Params>) => Observable<Params>' is not assignable to parameter of type 'OperatorFunction<Params, {}>'

Doesn't work with Angular 9

Just upgraded my project to Angular 9 and discovered that my subscriptions are not longer getting unsubscribed using the untilComponentDestroyed(this). Still troubleshooting exactly why. The library successfully replaces the ngOnDestroy function of the component, but the original ngDestroy is still called when the component is destroyed.

Linting rule

I find out your component which is awesome, I was using similar approach since old RxJs but your ways align with latest version much better.

What I am thinking would make it even better is adding linting rule. So if you subscribe to observable you must use ,pipe(untilComponentDestroyed(this))

Because I dont trust people since they always forget linting will be there to make sure that that we unsubscribe, and I wouldn't even care about cold or hot.

I am happy to look into it if you say it can be part of the project

@deprecated untilComponentDestroyed

I am not sure why did untilComponentDestroyed(this) got deprecated and I couldn't find explanation looking even on google.
Please, give small explanation here or somewhere, maybe in README

component not finding untilComponentDestroyed

Can you please tell me the correct import line to use?
import {untilComponentDestroyed} from ??;

ng2-rx-componentdestroyed significantly increases build size

1. Create a new project ng new bug-test && cd bug-test
2. Install ng2-rx-componentdestroyed npm i ng2-rx-componentdestroyed
3. Install webpack bundle analyzer npm i --save-dev webpack-bundle-analyzer
4. Build the project and analyze it: ng build --prod --stats-json && npx webpack-bundle-analyzer dist/bug-test/stats.json. Don't close opened browser window.
5. Replace app.component.ts with:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { untilComponentDestroyed } from 'ng2-rx-componentdestroyed';
import { interval } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'bug-test';
  
  ngOnInit() {
    interval(1000).pipe(
      untilComponentDestroyed(this) // <--- magic is here!
    ).subscribe(console.log);
  }

  ngOnDestroy() {}
}

6. Repeat step 4.
7. Replace app.component.ts with:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable, ReplaySubject, interval } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export interface OnDestroyLike {
  ngOnDestroy(): void;

  [key: string]: any;
}

export function componentDestroyed(component: OnDestroyLike): Observable<true> {
  if (component.__componentDestroyed$) {
    return component.__componentDestroyed$;
  }

  const oldNgOnDestroy = component.ngOnDestroy;
  const stop$ = new ReplaySubject<true>();

  component.ngOnDestroy = () => {
    if (oldNgOnDestroy) {
      oldNgOnDestroy.apply(component);
    }

    stop$.next(true);
    stop$.complete();
  };

  return component.__componentDestroyed$ = stop$.asObservable();
}

export function untilComponentDestroyed<T>(component: OnDestroyLike): (source: Observable<T>) => Observable<T> {
  return (source: Observable<T>) => source.pipe(takeUntil(componentDestroyed(component)));
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'bug-test';
  
  ngOnInit() {
    interval(1000).pipe(
      untilComponentDestroyed(this) // <--- magic is here!
    ).subscribe(console.log);
  }

  ngOnDestroy() {}
}

8. Repeat step 4.
9. Compare the results.

Comparison:

• without untilComponentDestroyed:

chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.34c57ab7888ec1573f9c.css (styles) 0 bytes [initial] [rendered]
chunk {2} polyfills.2f4a59095805af02bd79.js (polyfills) 59.6 kB [initial] [rendered]
chunk {3} main.88ceee217c91c1260509.js (main) 172 kB [initial] [rendered]

main.js is 172 kB

• with import { untilComponentDestroyed } from 'ng2-rx-componentdestroyed';:

chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.34c57ab7888ec1573f9c.css (styles) 0 bytes [initial] [rendered]
chunk {2} polyfills.2f4a59095805af02bd79.js (polyfills) 59.6 kB [initial] [rendered]
chunk {3} main.5b704f64e3b0599b4cfe.js (main) 279 kB [initial] [rendered]

main.js is 279 kB

• with copied untilComponentDestroyed:

chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.34c57ab7888ec1573f9c.css (styles) 0 bytes [initial] [rendered]
chunk {2} polyfills.2f4a59095805af02bd79.js (polyfills) 59.6 kB [initial] [rendered]
chunk {3} main.020d6bfbbf02e4cf0726.js (main) 180 kB [initial] [rendered]

main.js is 180 kB

Screenshots are clickable.

As you can see, when you import ng2-rx-componentdestroyed, tree shaking doesn't work on rxjs and the final bundle contains all the rxjs modules, which increases bundle size by 107 kB.

When I copy untilComponentDestroyed sourcecode to the project files, the final bundle size is increased only by 8 kB.

Observable.interval

Hi there,

Just wondering about your code sample (in Readme) of:

Observable.interval(1000)

Because Angular throws error:

ERROR in src/app/test.component.ts(44,20): error TS2339: Property 'interval' does not exist on type 'typeof Observable'.

Should it not be just

interval(1000)

ERROR Error: Uncaught (in promise): TypeError: Cannot read property '__componentDestroyed$' of undefined

Can any body help me to figure out what is remaing to configure, due to which this issue has occurred.
I am working on Angular4.

I install npm package then in component, I imported the untilComponentDestroyed.

Please help me to solve this issue.

CHECK: untilComponentDestroyed(this) has to be last piped operator

When handling unsubscribing of observables with takeUntil(otherObservable), the takeUntil has to be the last piped operator. Please check if this also applies to untilComponentDestroyed

takeUntil error article https://blog.angularindepth.com/rxjs-avoiding-takeuntil-leaks-fb5182d047ef

Issue with type checking?

Hello, while trying to use your package, I came across this issue:

ERROR in src/app/app.component.ts(104,61): error TS2345: Argument of type 'Observable' is not assignable to parameter of type 'Observable'.
Property 'switchMap' is missing in type 'Observable'.
src/app/app.component.ts(142,98): error TS2345: Argument of type 'Observable' is not assignable to parameter of type 'Observable'.

This happens when I use it like such:
this.router.events.filter(event => event instanceof NavigationEnd).takeUntil(componentDestroyed(this))
and/or:
this.AFAuth.authState.takeUntil(componentDestroyed(this)).subscribe((state: User)

any ideas?

thanks