netanelbasal / ngx-auto-unsubscribe Goto Github PK

View Code? Open in Web Editor NEW

346.0 12.0 41.0 289 KB

Class decorator that will automatically unsubscribe from observables

Home Page: https://netbasal.com/automagically-unsubscribe-in-angular-4487e9853a88

License: MIT License

TypeScript 100.00%

rxjs angular unsubscribe decorators

ngx-auto-unsubscribe's Introduction

Angular - Auto Unsubscribe For Pros

For Angular 9+, use until-destroy

Class decorator that will automatically unsubscribe from observable subscriptions when the component is destroyed

Installation

npm install ngx-auto-unsubscribe --save

Usage

import { AutoUnsubscribe } from "ngx-auto-unsubscribe";

@AutoUnsubscribe()
@Component({
  selector: 'inbox'
})
export class InboxComponent {
  one: Subscription;
  two: Subscription;

  constructor( private store: Store<any>, private element : ElementRef ) {}

  ngOnInit() {
    this.one = store.select("data").subscribe(data => // do something);
    this.two = Observable.interval.subscribe(data => // do something);
  }

  // This method must be present, even if empty.
  ngOnDestroy() {
    // We'll throw an error if it doesn't
  }
}

Options

Option	Description	Default Value
`arrayName`	unsubscribe from subscriptions only in specified array	`''`
`blackList`	an array of properties to exclude	`[]`
`event`	a name of event callback to execute on	`ngOnDestroy`

Note: blackList is ignored if arrayName is specified.

Similar projects

You can also use https://github.com/NetanelBasal/ngx-take-until-destroy.

ngx-auto-unsubscribe's People

Contributors

Stargazers

Watchers

ngx-auto-unsubscribe's Issues

autounsubscribing block-scoped Observables

I know it's not a proper issue but rather a question about possible enhancement but is it possible in any way to modify this decorator so it would cover such cases like:

ngOnInit {
  Observable.fromEvent(window, 'dragend').subscribe();
}

ngOnInit {
  const subscription = Observable.fromEvent(window, 'dragend').subscribe();
}

how do i register this in ngModule?

Do I have to store all subscriptions in properties ?

Do I have to store the subscription to a variable to get it unsubscribed?
I used httpClient services in my project just like this:

this.commerceService.getTotalList(this.listOptions).subscribe(
    // Do whatever
);

Do I have to store all subscriptions in properties ?

Doesn't unsubscribe in --prod builds unless class implements the ngOnDestroy method

Hi Netanel. I've come across a peculiar bug in my code that led me to realise the AutoUnsubscribe decorator doesn't trigger unsubscription unless the class it decorates explicitly implements the OnDestroy interface (and the required ngOnDestroy method). The reason, it seems, is that the dynamically added ngOnDestroy gets "compiled out" when building with the --prod flag.

I was just wondering if you've come across the same issue or it's specific to my code setup. I'm on angular 2.4.3.

Error with prod build on IE 11

In IE I get the following error when running the app in prod mode. This is my code:

@AutoUnsubscribe()
export class LoginComponent implements OnDestroy {
    private loginSub: Subscription;
    public ngOnDestroy(): void {
    }
}

This is the error:

ERROR Error: Uncaught (in promise): TypeError: Object doesn't support property or method 'includes'
TypeError: Object doesn't support property or method 'includes'
   at e.prototype.ngOnDestroy (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:1117979)
   at Nn (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:36390)
   at Mn (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:36134)
   at kn (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:36010)
   at mr (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:49165)
   at t.prototype.destroy (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:124668)
   at e.prototype.destroy (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:121686)
   at t.prototype.deactivate (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:290915)
   at t.prototype.deactivateRouteAndOutlet (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:281394)
   at t.prototype.deactivateRouteA
   "ERROR"
   {
      [functions]: ,
      __proto__: { },
      description: "Uncaught (in promise): TypeError: Object doesn't support property or method 'includes'
TypeError: Object doesn't support property or method 'includes'
   at e.prototype.ngOnDestroy (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:1117979)
   at Nn (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:36390)
   at Mn (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:36134)
   at kn (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:36010)
   at mr (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:49165)
   at t.prototype.destroy (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:124668)
   at e.prototype.destroy (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:121686)
   at t.prototype.deactivate (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:290915)
   at t.prototype.deactivateRouteAndOutlet (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:281394)
   at t.prototype.deactivateRouteAndItsChildren",
      message: "Uncaught (in promise): TypeError: Object doesn't support property or method 'includes'
TypeError: Object doesn't support property or method 'includes'
   at e.prototype.ngOnDestroy (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:1117979)
   at Nn (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:36390)
   at Mn (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:36134)
   at kn (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:36010)
   at mr (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:49165)
   at t.prototype.destroy (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:124668)
   at e.prototype.destroy (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:121686)
   at t.prototype.deactivate (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:290915)
   at t.prototype.deactivateRouteAndOutlet (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:281394)
   at t.prototype.deactivateRouteAndItsChildren",
      name: "Error",
      promise: { },
      rejection: { },
      stack: "Error: Uncaught (in promise): TypeError: Object doesn't support property or method 'includes'
TypeError: Object doesn't support property or method 'includes'
   at e.prototype.ngOnDestroy (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:1117979)
   at Nn (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:36390)
   at Mn (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:36134)
   at kn (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:36010)
   at mr (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:49165)
   at t.prototype.destroy (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:124668)
   at e.prototype.destroy (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:121686)
   at t.prototype.deactivate (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:290915)
   at t.prototype.deactivateRouteAndOutlet (http://localhost:5001/vendor.5f0ba2a42769d6fe9411.bundle.js:1:281394)
   at t.prototype.deactivateRouteAndItsC",
      Symbol(observable)_i.mq3bxu56l2r: undefined,
      Symbol(react.element)_g.mq3bxu56l2r: undefined,
      Symbol(rxSubscriber)_h.mq3bxu56l2r: undefined,
      task: { },
      zone: { }
   }

includeArrays parameter is never used in the codebase

This param is used only in the constructor and nowhere else. It seems that just setting arrayName does the trick. In other words, includeArrays should be removed altogether.

Original ngOnDestroy event is not applied if using arrayName param

Original ngOnDestroy event is not applied if using arrayName param
because of return here

if (arrayName) {
  return doUnsubscribeIfArray(this[arrayName]);
}

Logic reversed?

Looking into why this isn't working for me I realised you have a blackList but then you check to make sure the property is on the blacklist before trying to unsub?

event not being called...

maybe missing something but set it as

@AutoUnsubscribe({event: 'bar'})

export class EntPrivilegesComponent implements OnDestroy, OnInit {

    bar() {
        alert(1);
    }

but bar not being called on destroy.
am I missing something?

Sean

Seems like this is not working for Angular 5

if anyone got same error?

Unsubscribe does not work with angular 9

Unsubscribe does not work when I use angular 9

base class usage?

Cool stuff, thanks a lot!

Short question: Wouldn't it work to define the annotation and the base OnDestroy method in the super class of a component? For example:

@AutoUnsubscribe()
export class BaseClass implements  OnDestroy {
    public ngOnDestroy(): void {
    }
}

and the sub class has only:

@Component({
    selector: 'child',
})
export class ChildComponent extends BaseClass {
    private one: Subscription;
}

Wouldn't this work?

and then if necessary the child component could still override ngOnDestroy to do custom stuff

wrong convention name regard one$, two$, three$

name need to be: oneSubscription, twoSubscription, threeSubscription.

$ is for observable, and it a bit confuse in the example.

u loop in the end over Subscription cause they have the unsubsribe method and not the observable itself

Thanks

Make sense includeArrays options?

Couldn't be "clear" to check directly while looping the properties, if it's an array and act accordingly instead to set the option to true and then check it?. I find a little bit confusing. In any case thumbs up!!!

Add missing LICENSE

Can you please add a LICENSE file and set the license type in your repo?

If you want me to, I will create a PR to add these files. Just let me know.

chceck instanceof

ngx-auto-unsubscribe/src/auto-unsubscribe.ts

Line 3 in 63cbbae

const doUnsubscribe = subscription => {

Why not just check with instanceof? Not sure what's duck typing here for

const doUnsubscribe = sub => sub instanceof Subscription

Support universal

Can we please do a platform check before using window ?

private method subscription

HI @NetanelBasal , just a suggestion:

with that decorator you can only check for class variable subscription or class arrays scubscription
if you have something like this

method() {
  const sub = Observable.interval(1000).subscribe(val => {this.val = val})
}

the sub const here is not unsubscribed. You could force the user to put sub inside a class array to being collected by the decorator loop but in this case i'd suggest to not loop trough all class properties but introduce a patter that require to add all the subscription that needs un subscription inside a known variable like

this.subscriptions.push(Observable.interval(1000).subscribe(val => {this.val = val}))

or better inside a named Map() to being able of retrieve the subscription easily.

in the decorator just loop through the subscriptions array and call unsubscribe

AOT Build supported?

Does this work with AOT?

It whould be greate if there be global config for that.

Don't know if it is the case now but I had problems with injected ngrx Store. Guess it has/had unsubscribe method and that was a case of problems. So now I am using modified version of you decorator like:

export function AutoUnsubscribe(blackList = []) {
  blackList = [...blackList, 'store'];

Anyway, could a decorator be @Injectable()? (To give it provider with config)

Filter for Subject

Is there any way to filter the Subject objects ?
These also have an unsubscribe() method although they're not of type Subscription.

AutoUnsubsribe changes angular semantics of ngOnDestroy

Angular allows a component to issue synchronous events within its ngOnDestroy lifecycle hook (see https://github.com/angular/angular/blame/28bdeeef3e954fd13b029f9bc9b1109d22385a1b/packages/core/test/linker/change_detection_integration_spec.ts#L1121 for a test describing the behavior)

AutoUnsubscribe changes that behavior because it first calls unsubscribe on everyting that has an unsubscribe function and then calls the ngOnDestroy hook. If you try to emit anything within the ngOnDestroy hook you will get an exception because each EventEmitter has an unsubscribe function.

It should be thought about changing the call order of the original ngOnDestory hook and the unsubscribe logic.

Handle an array of subscriptions?

Hey,

How hard would it be for you to implement handling an array of subscriptions?
I have a case where I have 3+ subscriptions, so I wouldn't wanna create a variable for each one of them.

If you're too busy, I can give it a go.

Thanks

Make the api more readable

Change the blackList parameter to be an object with exclude key.

@AutoUnsubscribe({
  exclude: []
})

Base class usage not possible with angular 5

I've upgraded to angular 5 and to the latest version of this library and what I described in #4
is not possible any more. I don't receive an error in the console nor is the subscription unsubscribed.

I verified that the ngOndestroy is properly called and that the component is actually deleted.

PS: Using ionic in the project.

autosubscribe unsubscribes from component method

Our project used a signalR and in the method of the component unsubscribe the autounsubscribe decorator worked