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

Hlawuleka MAS · Accepted Answer · 2018-04-22 21:05:12Z

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

edited Apr 22, 2018 at 21:05

answered Jan 2, 2018 at 21:36

Hlawuleka MAS

5805 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Harish Over a year ago

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

Tom Over a year ago

Same issue, but I solved that creating (not just declaring) the event emmit in the child component. Example: @Output() closePopUp: EventEmitter<boolean> = new EventEmitter<boolean>();

Pengyy · Accepted Answer · 2017-05-23 08:16:50Z

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[]);
}

edited May 23, 2017 at 8:16

answered May 23, 2017 at 7:59

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

4 Comments

eko Over a year ago

I don't think this code will work, it is not returning anything in the scope of getEventHistory() method.

Pengyy Over a year ago

@echonax agreed. I was tring to change subscribe to map. :) and return this.tokenResolver.getToken but not sure whether this will work. :P

jibjapda Over a year ago

Thank you for you're proposal, but sadly it doesn't work, just as echonax stated.

jibjapda Over a year ago

Ohhh god! Thank you so much! I have spent so many hours on trying to fix this!

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related