Angular 2 Cannot read property 'subscribe' of undefined TypeError: Cannot read property 'subscribe' of undefined

Question

I have tried many propositions on fixing this error here on stackoverflow, but now I just need to ask as I have spent many hours with literally getting nowhere now.

I have this simple Service:

constructor(private http: Http, private tokenResolver: TokenResolver) {}

public getEventHistory(): Observable<heatmapElement[]> {

  this.tokenResolver.getToken(true).subscribe(token => {
    var headers = new Headers();
    headers.append('Authorization', 'Bearer ' + token);
    headers.append('Content-Type', 'application/json');

    this.result = this.http.get(this.restApi, new RequestOptions({headers: headers}))
        .map((res: Response) => res.json());
  });

  return this.result as Observable<heatmapElement[]>;
}

I want to get the data using :

public demoData: heatmapElement[] =[];

getEventHistory(): void {
  this.eventHistoryService.getEventHistory()
                          .subscribe(data => this.demoData = data,);
}

This creates a error that I just cant seem to fix:

EXCEPTION: Uncaught (in promise): Error: Error in http://localhost:5555/app/dashboard/dashboard.html:13:8 caused by: Cannot read property 'subscribe' of undefined TypeError: Cannot read property 'subscribe' of undefined

I would be very grateful for help, thank you

Answer 1

Odd as this may be, in my instance, after spending lots of time debugging, it turned out, I was using an Output(@Output) EventEmitter property to handle a custom event, and Angular did not recognize my property or custom event property when passed on a template:

e.g

<custom-component (keydownEvent)="someFunctoin()"></custom-component>

The issue with doing the above is(as far as my issue is concerned) (keydownEvent) is not a valid Event handler, but why the heck does it work in development and not when you've built your project. Even MORE strange, ng build --prod does not issue any errors or warning!

Solution

<custom-component keydown="someFunctoin()"></custom-component>

Where do subscriber/subscription related errors come in?

Well, as you'd imagine, one subscribed to the EventEmitter - so I guess that's where the correlation is

Answer 2

you can't return a result of async call outside its subscribe method.

If you want to return Observable from getEventHistory(), you can change subscribe to map or switchMap.

public getEventHistory(): Observable<heatmapElement[]> {

  return this.tokenResolver.getToken(true).switchMap(token => {
    var headers = new Headers();
    headers.append('Authorization', 'Bearer ' + token);
    headers.append('Content-Type', 'application/json');

    return this.http.get(this.restApi, new RequestOptions({headers: headers}));
  })
  .map((res: Response) => res.json() as heatmapElement[]);
}