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

jibjapda picture jibjapda · May 23, 2017 · Viewed 13.1k times · Source

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

Hlawuleka MAS picture Hlawuleka MAS · Jan 2, 2018

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