CODEWITHSUNDEEP
angularrxjsobservablesubscribe
Alex Palacios
Alex Palacios

Reputation: 389

Cannot read property 'unsubscribe' of undefined in Angular 2

I am trying to create an ObservableTimer that ticks up to a certain number. I already have logic to do that, but when I try to unsubscribe from it, I get a "Cannot read property 'unsubscribe' of undefined" error for it.

Here is my code:

syncExpireTime() {
    let route = AppSettings.API_ENDPOINT + 'Account/ExpireTime'
    this.http.get(route, this.options).map(this.extractData).catch(this.handleError).subscribe(
        res => {this.expireTime = +res},
        error => console.log(error),
        () => this.timerSub = TimerObservable.create(0,1000)
            .takeWhile(x => x <= this.expireTime)
            .subscribe(x => x == this.expireTime ? this.logout() : console.log(x))
    )
}

And then, here is my logout code. I am trying to unsubscribe from the expiration timer when I log out

logout() {
    this.timerSub.unsubscribe()
    this.router.navigate(['./login'])
}

Upvotes: 11

Views: 33661

Answers (4)

Filip Kov&#225;č
Filip Kov&#225;č

Reputation: 579

As reminder, this error occurs to me as well but the problem was bit different. I was trying to unsubscribe to subscription, which already was done via takeUntil rxjs operator.

This is bad design:

// unsubscribe = new Subject<void>(); 
const subsc = this.service.get().pipe(takeUntil(this.unsubscribe$)).subscribe((value) => {});

Either use takeUntil OR variable to destroy subscription.

This can happen when on ngOnDestroy hook has:

this.unsubscribe$.next();
this.unsubscribe$.complete(); // these are allright

So when you want use variable?.unsubscribe(), let takeUntil() go.

Upvotes: 0

babu durairaji
babu durairaji

Reputation: 129

i had faced the same exception. it would better check "subscription.closed == false", before calling the unsubscribe().

ngOnDestroy() {

    // If this.notification has the multiple subscriptions 
    if(this.notifications && this.notifications.length >0)
    {
        this.notifications.forEach((s) => {
            if(!s.closed)    
                s.unsubscribe();
        });        
    }
    // if this.subscription has direct object
    if(this.subscription && !this.subscription.closed)
        this.subscription.unsubscribe();
}

Upvotes: 4

Amit kumar
Amit kumar

Reputation: 6147

There are two way which you can try to fix this issue. 

logout() {
    if(this.timerSub){// this if will detect undefined issue of timersub
       this.timerSub.unsubscribe();
      } 
    this.router.navigate(['./login'])
}

or you can try ngOnDestroy lifecycle hook of angular 2 which is used to do thing when we want to destroy our component

ngOnDestroy() {
    if(this.timerSub){
       this.timerSub.unsubscribe();
      } 
    this.router.navigate(['./login']); 
 }

i hope this will help :)

Upvotes: 23

Roman C
Roman C

Reputation: 1

You should call unsubscribe in ngOnDestroy.

Lyfecicle Hooks

ngOnDestroy

Cleanup just before Angular destroys the directive/component. Unsubscribe observables and detach event handlers to avoid memory leaks.

Called just before Angular destroys the directive/component.

Upvotes: 2

Related Questions