0

I have a large application built on Angular 7. I want to implement something which will unsubscribe the RxJs subscribers if developer has forgotten to unsubscribe in ngOnDestroy. This is to ensure no memory leak in application.

Is it possible with Guards? When the route changes, the Guard will check which component was last loaded and unsubscribe its subscribers?

user1312242
  • 339
  • 1
  • 3
  • 15
  • Does this answer your question? [Angular subscribe elegant](https://stackoverflow.com/questions/60223630/angular-subscribe-elegant) – ruth Nov 13 '20 at 05:31

3 Answers3

1

The easiest way i can think of is to use AsyncPipe on your application

This way angular will unsubscribe the observable when the component is destroy

Ref: https://angular.io/api/common/AsyncPipe

Melvin Kah Hoo
  • 100
  • 2
  • Thanks for your help. My application is huge it will be too much of work to change the subscribers and use AsyncPipe in HTML.Is there any way I can handle this in central location like a guard – user1312242 Nov 13 '20 at 10:14
1

Is it possible with Guards? When the route changes, the Guard will check which component was last loaded and unsubscribe its subscribers?

Unfortunately not out of the box. And the reason is it would be hard to discern which list of subscriptions you should be unsubscribing from. For example, it could be any of these :

subscriptions : Subscription[]
subscriptions : any[]
subscriptions : any

Or even subscriptions inside a service that you want to unsubscribe.

However there are libraries that will do some of this for you (For example : https://tutorialsforangular.com/2020/12/14/auto-unsubscribing-from-observables-on-ngdestroy/). Unfortunately they still require either an attribute on the component, and/or some conventions to be used that your subscriptions array is always named the same.

It may also be possible (Since it's open source), to take a dive into the code and be able to apply it to a routeguard etc.

MindingData
  • 11,181
  • 6
  • 44
  • 66
0
  1. Create new file auto-unsubscribe.ts containing exported class autoUnsubscribe

@Injectable()
export class autoUnsubscribe {
   subscriptions_: any[] = []
   get subscriptions(): Subscription[] {
    return this.subscriptions_
  }
   set subscriptions(v: any) {
    this.subscriptions_.push(v)
  }
   ngOnDestroy(): void {
    this.subscriptions.forEach((s) => {
      s.unsubscribe()
    })
  }
}
  1. On every component declaration add extends statement

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent extends autoUnsubscribe {
  title = 'app';
}
  1. Anywhere in your component class you can execute Subscribe like this:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent extends autoUnsubscribe implements OnInit{
  title = 'app';
  
  
  ngOnInit() {
    this.subscriptions=interval(2000).subscribe(console.log)
  }
}
  1. Extended class will take care of the rest!
Serhii
  • 71
  • 1
  • 7