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');
    });
}