1

I am facing an issue as :: Uncaught Type Error: Cannot read property 'unsubscribe' of undefined.I applied a lot of fixes available on the net but still couldn't get rid of the issue.I also logged the object in console during debugging the code. The subscription object is available and is not in closed state , but when it hits the ngdestroy() method its gets undefined.Please help me out.Below is my code :

Initializing :

downloadSubscription: Subscription= new Subscription();
uploadSubscription: Subscription= new Subscription();

Assigning the Observable:

 this.uploadSubscription = this._apiService.uploadFile(jsonData).subscribe(response => {
  this.showAlertMessage(true, 'success', response.RESPONSE);
}, Error => {
  console.log('ErrorMessage:' + Error +
    ' Current Request' + JSON.stringify(this.Upload.filename) + 'File At Post Method.');
  this.showAlertMessage(true, 'error', 'Unable to upload File.Please try again.');
});

NGDestroy method

ngOnDestroy() {
console.log('unsubscribing observables');
// unsubscribing to prevent memory leaks.  
this.uploadSubscription.unsubscribe();  }

Attaching debug object as image

ganesh310
  • 35
  • 6
  • Why do you initialize `uploadSubscription: Subscription = new Subscription();` when you just reassign it to `this._apiService.uploadFile`? – msanford Nov 08 '17 at 15:44
  • Initially I did that but since I got undefined error I initialized it thinking just in case if that method call doesn't happen then my variable wont get initialized – ganesh310 Nov 08 '17 at 15:46
  • While not a duplicate _per se,_ see https://stackoverflow.com/questions/38008334/angular-rxjs-when-should-i-unsubscribe-from-subscription and note that they use `new Subject()`, not `Subscription()`. – msanford Nov 08 '17 at 15:48
  • 1
    But they are using takeUntil approach which is why they initializing a type of subject. Mine is plain observable.I really cant figure out the issue in my code using plain observables. – ganesh310 Nov 08 '17 at 16:02
  • where do you execute the 2nd code snippet? ngOnInit? constructor? – Jota.Toledo Nov 08 '17 at 16:29
  • I assigned the 2nd snippet in a button click event – ganesh310 Nov 08 '17 at 16:58
  • @ganesh310 Since the subscription assignment is within a button click event, the user may not click the button before the component is destroyed. Therefore the subscription is not defined. In this case, I just wrap the unsubscribe in an if statement `if(this.uploadSubscription){ this.uploadSubscription.unsubscribe() }` – LLai Nov 08 '17 at 17:27
  • @LLai I agree your statement ,but I initialized the object and also I tested the app with clicking of button but I still got the issue. – ganesh310 Nov 08 '17 at 18:19
  • @ganesh310 hmm, can you make a plnkr that recreates the issue? – LLai Nov 08 '17 at 18:21

1 Answers1

0

I found out that Since I am using HttpClient Module in my service there is really not any need to unsubscribe the observable.

Points To Note:

1) There are two group of Observables : Finite and Infinite

2) Http By nature will definitely come up with an response and hence will be a finite one.

3) We will unsubscribe to free up stacked memory that retains even though the target gets destroyed.

Below is a brief of Observable life cycle of an http request as per my understanding:

1) Component will initiate an subscription object

2) It will then have a catch subscriber Object which will trigger the Observable.

3) Finally HTTP call will be triggered and here we have two cases :

 a) User stays with in the component :
    In this case there is no need to unsubscribe ,because request will be completed and Observable will be cleaned automatically.

  b) User Navigates to different page : 
    In this case the target aka component gets  destroyed ,but  still the Observable will live till it gets a response .Once a response is received Observable will be cleaned automatically.

Hence there are no memory leaks retained in the browser. A point to note here is that In my case since I am downloading an heavy file a temporary memory spike will happen which is not useful as the target got destroyed but will eventually clean up itself once Observable gets completed.

ganesh310
  • 35
  • 6