superkytoz superkytoz - 3 months ago 52
TypeScript Question

Uncaught TypeError: result.subscribe is not a function

I'm getting the following error:

Uncaught TypeError: result.subscribe is not a function


Here is also a screenshot of the error:

enter image description here

But I did tried to catch the error. Below you can see my code.

login.component.ts:

import { Component } from '@angular/core';
import { UserService } from '../../services/user.service';
import { User } from '../../models/user';
import {ToasterContainerComponent, ToasterService, ToasterConfig} from 'angular2-toaster/angular2-toaster';

@Component({
moduleId: module.id,
selector: 'login',
directives: [ToasterContainerComponent],
templateUrl: 'login.component.html',
providers: [UserService, ToasterService]
})

export class LoginComponent {
user: User = new User();
loginRes: String;
private toasterService: ToasterService;

public toasterconfig: ToasterConfig = new ToasterConfig({
showCloseButton: true,
tapToDismiss: false,
timeout: 0
});

constructor(private _userService: UserService, toasterService: ToasterService) {
this.toasterService = toasterService;
}

data = {};
onSubmit() {
this._userService.login(this.user)
.subscribe(
res => {
console.log("res onSubmit");
console.log(res);
},
function(error) { console.log("Error happened" + error)}
);
}
}


user.service.ts:

import { Injectable } from '@angular/core';
import { Headers, RequestOptions, Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { User } from '../models/user';

@Injectable()
export class UserService {
private loginUrl: string;

constructor(private _http: Http) {

}

login(user: User) {
this.loginUrl = "http://localhost:3000/api/auth/login";
let data = { "username": user.username, "password": user.password };
let body = JSON.stringify(data);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });

return this._http.post(this.loginUrl, body, options)
.map(this.extractData)
.catch(this.handleError);
}

private extractData(res: Response) {
let body = res.json();
return body || {};
}

private handleError(error: any) {
console.log('Yup an error occurred', error);
return error.message || error;
}
}


As you can see I have tried to catch the error in the
login()
method in
user.service.ts
. Anyone that maybe knows how I can
solve this?

Answer

Your handleError() function needs to return an Observable

If you look at the HTTP Client Angular 2 docs there is an example, but for your specific case

Replace

private handleError(error: any) {
    console.log('Yup an error occurred', error);
    return error.message || error;
}

with

private handleError(error: any) {
    console.log('Yup an error occurred', error);
    return Observable.throw(error.message || error);
}
Comments