Cannot read property 'next' of undefined

Question

I'm subscribing to an observable so that anytime my subscribeToTasks() call in my service fails, it will ultimately invoke the code in my subscriptionError() method from my component, which in this example is just a simple alert. The problem is, anytime an error on this call occurs and this.newSubscriptionFailure.next() gets invoked, I get the following error in my browser console:

Cannot read property 'next' of undefined

How is newSubscriptionFailure undefined when you can clearly see it being defined above the method? That code should get hit long before the error in the api call happens. I've used this approach in the past and it has always worked, the only difference I can think of is that I'm calling .next() in the service (same file that newSubscriptionFailure is defined) whereas I normally call .next() in a separate component file. What am I doing wrong? Is there a way I can get this to work, or a better approach to take?

Code from my service:

import { Observable } from 'rxjs/Observable';
import { Subject }    from 'rxjs/Subject';

public subscribeToTasks(period: string, stripeToken: string): Observable<any> {        
    let body = JSON.stringify({ period, stripeToken });
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });        
    return this.authHttp.post(this.apiTasks, body, options).map(response => {
        return response.json();
    }).catch(this.newSubscriptionError);
}


newSubscriptionFailure = new Subject();
newSubscriptionFailure$ = this.newSubscriptionFailure.asObservable();

public newSubscriptionError() {
    this.newSubscriptionFailure.next();
}

code from my component:

ngOnInit(): void {
    this.subscriptionError();
}

subscriptionError(){
    this.subscriptionsService.newSubscriptionFailure$.subscribe(() => {
        alert('call failed');
    });
}

Answer 1

Change

}).catch(this.newSubscriptionError);

to

}).catch((e)=>this.newSubscriptionError());

or

}).catch(this.newSubscriptionError.bind(this));

your this is not refering to the Injectable otherwise

Answer 2

In case anyone else has the same issue I had. I was using a subject called this.destroy$ that I call next on in the OnDestroy method. Using it in the subscribed observable like: .takeUntil(this.destroyed$). I had forgotten to initialise this destroy$ object. After using destroy$: Subject<any> = new Subject<any>(); the error went away.