5

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

Pengyy
  • 37,383
  • 15
  • 83
  • 73
jibjapda
  • 87
  • 2
  • 2
  • 9

2 Answers2

4

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

Hlawuleka MAS
  • 550
  • 5
  • 11
  • Thank you, I got the same issue with the event emitter, wasted lot of time looking at the service methods that I used. Your answer solved my issue – Harish May 23 '18 at 07:56
  • Same issue, but I solved that creating (not just declaring) the event emmit in the child component. Example: @Output() closePopUp: EventEmitter = new EventEmitter(); – Tom Aug 07 '18 at 14:08
3

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[]);
}
Pengyy
  • 37,383
  • 15
  • 83
  • 73
  • I don't think this code will work, it is not returning anything in the scope of `getEventHistory()` method. – eko May 23 '17 at 08:06
  • @echonax agreed. I was tring to change `subscribe` to map. :) and return `this.tokenResolver.getToken` but not sure whether this will work. :P – Pengyy May 23 '17 at 08:08
  • Thank you for you're proposal, but sadly it doesn't work, just as echonax stated. – jibjapda May 23 '17 at 08:09
  • Ohhh god! Thank you so much! I have spent so many hours on trying to fix this! – jibjapda May 23 '17 at 08:21