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
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