Angular2 Promise .then is not defined

Question

I am trying to build MEAN Application using Angular 2.
Flow is like
login.component.ts handing event calling getLogin function of auth.service.ts
auth.service.ts making Promise to Express server on url /login.

But unable to make proceed and getting this error

"EXCEPTION: Error in http://localhost:4000/app/components/account/login.component.html:4:0 caused by: this.authService.getLogin.then is not a function" core.umd.js:3064:13

ORIGINAL EXCEPTION: this.authService.getLogin.then is not a function core.umd.js:3066:17

Object { _view: Object, _nodeIndex: 10, _tplRow: 4, _tplCol: 0 } core.umd.js:3074:17

Error: Error in http://localhost:4000/app/components/account/login.component.html:4:0 caused by: this.authService.getLogin.then is not a function zone.js:958:21

login.component.ts

import {Component} from '@angular/core';
import {AuthService} from '../../services/auth.service';
@Component({
    moduleId: module.id,
    selector: 'login',
    templateUrl: './login.component.html'
})
export class LogInComponent {
        info:String="";
        username:String;
        password:String;
        constructor(private authService:AuthService){

        }

        login(event){
          console.log("event call");
          event.preventDefault();
          var newAccount={
            username:this.username,
            password:this.password
          };
          this.authService.getLogin.then(data => this.info = dat);
        }

}

auth.service.ts

import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class AuthService {
    constructor(private http:Http){
    }
    getLogin(newAccount): Promise<any> {
      return this.http.get("/log")
                 .toPromise()
                 .then(response => response.json().data)
                 .catch(this.handleError);
    }
}

Express output for testing

router.get('/log',  function(req, res) {
      res.json({"status":"okay"});
});

Checked the express server, it is giving correct json output

What I am doing wrong ?

One more thing is when to use subscribe vs map vs then. Did not understanding the difference?(for this link can be useful)

Trying from 2 days.Will post any code if need.

Shouldnt the service only return just promise.. you are doing .then in the service as well as component — Parth Ghiya, Feb 25 '17 at 06:54

score -1 · Accepted Answer · answered Feb 25 '17 at 07:59

-1

In login.component.ts you just called getLogin. It should be function getLogin() for .then to work properly as defined in auth.service.ts.

It should be like

      this.authService.getLogin().then(data => this.info = dat);

instead of

      this.authService.getLogin.then(data => this.info = dat);

answered Feb 25 '17 at 07:59

Swap

165
3
12

Thank you so much! – SWAPNIL DEWALKAR Feb 25 '17 at 08:00

Angular2 Promise .then is not defined

1 Answers1