Angular2 - 'then' does not exist on type 'void'

Question

I try simple app where I delete user after clicking on delete button.

When I try to run server like this I get error on then in deleteUser() component:

 deleteUser(user: User, event: any) {
    event.stopPropagation();
    this.userService
      .deleteUser(user)
      .then(res => {
        this.httpUsers = this.httpUsers.filter(h => h !== user);
        if (this.selectedUser === user) { this.selectedUser = null; }
      })
      .catch(error => this.error = error);
  }

service:

  deleteUser(user: User) {
    console.log('Deleting user');
  }

Error message:

app/users.component.ts(46,8): error TS2339: Property 'then' does not exist on type 'void'.

Line 46 from error is one above with .then(res => {

While googling I found this question so I removed void from deleteUser function, however nothing changed.

Any hint what I'm doing wrong?

Answer 1

you have to call the delete method so it will return the promise and you can use .then( you have to do like this

deleteUser(user: User) {
   return this.http.delete(url+id,...).toPromise();
}

Answer 2

You could use then if you are returning a promise. You can use subscribe if you are calling a REST API and then mapping the result

Using then

Service method

  getAudits() {
    // console.log('audits' + amplify.store('audits'));
    let audits: Audit[] = amplify.store('audits'));    
    return Promise.resolve(audits);
  }

Component

this.auditService.getAudits().then(audits => {
  this.audits = audits;
  this.updateChart(true);
});

Using subscribe

Service method

  getAudits() {
    return this.http.get('/rest/batch').map(res => res.json());
  }

Component

this.auditService.getAudits().subscribe(audits => {
  this.audits = audits;
  this.updateChart(true);
});

Answer 3

The deleteUser method in your service doesn't return a Promise, so you can't call .then(res => ...) on it, like the error states.

deleteUser(user: User) {
  console.log('Deleting user'); // <-- no return call - defaults to void
}