Angular 11 - subscribe is deprecated: Use an observer instead of a complete callback

Question

I have an Angular application in which errors are beginning to appear in the subscribe that they are deprecated.

This is my subscribe:

this.route.params.subscribe(params => {
      this.clienteId = +params['clienteId'];
      this.isNew = !this.clienteId;
      if (!this.isNew) {
        this.clienteService.get(this.clienteId).subscribe(c => {
          this.cliente = c;
          this.formNuevo.patchValue(this.cliente);
        });
      }
    });

This is the client-service.ts (get):

public get(idClient: number): Observable<Client> {
      return this.http.get<Client>(`${PREFIX}/${idClient}`);
    }

This is the error of the new subscribe:

-> 'clienteId' : object access via string literals is disallowed (no-string-literal)tslint(1)

-> subscribe: subscribe is deprecated: Use an observer instead of a complete callback (deprecation)tslint(1)

How can I solve the problem and apply the changes to this subscribe?

Are you possibly using a `null` for `error` or `complete` callback? — ruth, Mar 22 '21 at 08:17
The error is caused by TSLint but I can't fix the deprecated problem. The call works fine — synffryd, Mar 22 '21 at 08:20

score 12 · Accepted Answer · answered Mar 22 '21 at 08:23

12

Use higher order mapping operator like switchMap to map from one observable to another. Try to avoid nested subscriptions.
The "error" is mostly caused by trying to send one or the other callbacks for subscription while specifying null for other ones. For eg. using next and complete with null for error. It could be solved by sending an observer object that explicitly specifies the callbacks.

Try the following

import { iif, NEVER } from 'rxjs';
import { switchMap } from 'rxjs/operators';

this.route.params.pipe(
  switchMap(params => {
    this.clienteId = +params['clienteId'];
    this.isNew = !this.clienteId;
    return iif(                        // <-- `iif` for conditional mapping
      () => !this.isNew,
      this.clienteService.get(this.clienteId),
      NEVER                            // <-- don't emit if condition fails
    );
  })
).subscribe({
  next: c => {
    this.cliente = c;
    this.formNuevo.patchValue(this.cliente);
  },
  error: error => {
    // handle error
  },
  complete: () => {
    console.log('Request complete');
  }
});

answered Mar 22 '21 at 08:23

ruth

29,535
4
30
57

I don't really understand the new way to do it but I will keep reading some more information, because in the current subscribe I use two subscribe but now there is only one. Even so the subscribe keeps giving me the same error – synffryd Mar 22 '21 at 09:06
@synffryd: Could you show a screenshot of the error? – ruth Mar 22 '21 at 09:56
I have added an image to the question with the two errors that the new code shows – synffryd Mar 22 '21 at 12:00
Thanks for the screenshot. I think you might be a victim of this issue (though relatively old): https://github.com/ReactiveX/rxjs/issues/4159#issuecomment-491034939 – ruth Mar 22 '21 at 12:02
From what I'm seeing, the subscribe currently has to be done in the following way: ``.subscribe({ next: this.handleUpdateResponse.bind(this), error: this.handleError.bind(this) });``. In this case there is a subscribe, but how do I do if I have a subscribe inside another subscribe? – synffryd Mar 22 '21 at 12:09
@synffryd: It's generally inelegant to have nested subscriptions. It leads to multiple open subscriptions. It's better to use a mapping operator like `switchMap` as shown here. More info: https://stackoverflow.com/a/63685990/6513921 – ruth Mar 22 '21 at 12:30

score 0 · Answer 2 · answered Apr 15 '21 at 13:50

0

I'm guessing you were hit by this TypeScript bug because your observer pattern looks correct. The bug has since been fixed. I don't believe the VS Code patch is live yet, but it should be pretty soon.

answered Apr 15 '21 at 13:50

vaindil

7,536
21
68
127

Angular 11 - subscribe is deprecated: Use an observer instead of a complete callback

2 Answers2