Nutella Per Minute

    @w11k/ngx-componentdestroyed
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.2 • Public • Published

    Build Status npm version

    Unsubscribe from Observables in Angular

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

    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();
    

    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

    Install

    npm i @w11k/ngx-componentdestroyed

    DownloadsWeekly Downloads

    10,702

    Version

    5.0.2

    License

    Apache-2.0

    Unpacked Size

    34 kB

    Total Files

    12

    Last publish

    Collaborators

    • pburgmer
    • m_sallat
    • fvonberg
    • sengmann
    • kaihenzler
    • romanroe