Angular 2 - Service function is undefined even though defined

Question

I have a service that does a post http request. I try to add the service from the component, I keep getting undefined error. I can definitely see it is defined as well as ctrl-clicking on it takes me to the correct function. Another thing i double checked is injecting the service in the module which is also done. Here is my code:

html:

<i (click)="subscribeSubject(subject._id)" class="fa fa-cart-plus fa-2x"></i>

ts:

subscribeSubject(id) {
    this.subscriptionService.subscribeSubject(id).subscribe();
}

service:

subscribeSubject(id): any {
this.http.post(environment.baseUrl + 'subscription', { subject: id, user_id: this.userService.currentUser._id })
  .map(res => {
    this.loadUserSubscriptions().subscribe();
  });
}

Below is the error I receive in the console:

ERROR 
TypeError: this.subscriptionService.subscribeSubject(...) is undefined
Stack trace:
CoursesComponent.prototype.subscribeSubject@webpack-internal:///../../../../../src/app/component/courses/courses.component.ts:33:9
View_CoursesComponent_4/<@ng:///AppModule/CoursesComponent.ngfactory.js:12:23
handleEvent@webpack-internal:///../../../core/esm5/core.js:13778:115
callWithDebugContext@webpack-internal:///../../../core/esm5/core.js:15287:39
debugHandleEvent@webpack-internal:///../../../core/esm5/core.js:14874:12
dispatchEvent@webpack-internal:///../../../core/esm5/core.js:10187:16
renderEventHandlerClosure/<@webpack-internal:///../../../core/esm5/core.js:10808:38
decoratePreventDefault/<@webpack-internal:///../../../platform-browser/esm5/platform-browser.js:2680:53
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:425:17
onInvokeTask@webpack-internal:///../../../core/esm5/core.js:4941:24
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:424:17
Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:192:28
ZoneTask.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:499:24
invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:1540:9
globalZoneAwareCallback@webpack-internal:///../../../../zone.js/dist/zone.js:1566:17
CoursesComponent.html:24:16
ERROR CONTEXT 
Object { view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…} }

Any idea what I am doing wrong?

Answer 1

I think the problem is with the call to the subscribe you are doing in your component. In your service you are returning anything, try with this approach:

subscribeSubject(id): any {
  return this.http.post(environment.baseUrl + 'subscription', { subject: id, user_id: this.userService.currentUser._id })
          .map(res => {
            return this.loadUserSubscriptions().subscribe();
          });
}