Uncaught TypeError: result.subscribe is not a function
<p>I'm getting the following error: <code>Uncaught TypeError: result.subscribe is not a function</code></p>

<p>Here is also a screenshot of the error:</p>

<p><a href="https://i.stack.imgur.com/yfhy0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yfhy0.png" alt="enter image description here"></a></p>

<p>But I did tried to catch the error. Below you can see my code.</p>

<p>login.component.ts:</p>

<pre><code>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 =&gt; {
                    console.log("res onSubmit");
                    console.log(res);
                },
                function(error) { console.log("Error happened" + error)}
            );
    }
}
</code></pre>

<p>user.service.ts:</p>

<pre><code>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;
    }
}
</code></pre>

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