Me estoy suscribiendo a un observable para que cada vez que falle mi llamada subscribeToTasks() en mi servicio, finalmente invoque el código en mi método subscribeToTasks( subscriptionError() de mi componente, que en este ejemplo es solo una alerta simple. El problema es que cada vez que se produce un error en esta llamada y se invoca this.newSubscriptionFailure.next() , aparece el siguiente error en la consola de mi navegador:

No se puede leer la propiedad 'siguiente' de indefinido

¿Cómo es que newSubscriptionFailure no está definido cuando puede verlo claramente definido sobre el método? Ese código debería recibir un golpe mucho antes de que ocurra el error en la llamada a la API. He usado este enfoque en el pasado y siempre ha funcionado, la única diferencia que se me ocurre es que estoy llamando a .next() en el servicio (el mismo archivo que se define newSubscriptionFailure ) mientras que normalmente llamo a .next() en un archivo de componente separado. ¿Qué estoy haciendo mal? ¿Hay alguna manera en que pueda hacer que esto funcione, o un mejor enfoque a seguir?

Código de mi servicio:

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

código de mi componente:

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