Angular 11: subscribe is deprecated: Use an observer instead?

Question

My tslint gone crazy? It gives warning for every subscribtion I made in whole app. It doesn't matter if I use old or new syntax it still says that subscribe is deprecated... How to write a subscription that will not be deprecated?

That's what was ok till today:

something.subscribe((user: User) => {
        this.userProviderService.setUserId(user.userId);
        this.proceed = true;
      });

I tried new syntax but makes no change:

something.subscribe({
        next: (user: User) =>  {
          this.userProviderService.setUserId(user.userId);
          this.proceed = true;
        },
        complete: () => {},
        error: () => {}
      });

This is exactly what it's saying:

(method) Observable.subscribe(next?: (value: Object) => void, error?: (error: any) => void, complete?: () => void): Subscription (+4 overloads) @deprecated — Use an observer instead of a complete callback

@deprecated — Use an observer instead of an error callback

@deprecated — Use an observer instead of a complete callback

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

So how do I subscribe to things now?

Try putting a dummy console in error and complete callbacks it seems to be an issue with empty callbacks for those keys. Many people have faced this issue — Beshambher Chaukhwan, Mar 12 '21 at 18:11
Does this answer your question? [Subscribe is deprecated: Use an observer instead of an error callback](https://stackoverflow.com/questions/55472124/subscribe-is-deprecated-use-an-observer-instead-of-an-error-callback) — mbojko, Mar 12 '21 at 18:36

score 17 · Accepted Answer · answered Apr 03 '21 at 17:27

17

I just looked up TSLint (v1.3.3) at VS Code extenstions tab. It says:

❗IMPORTANT: TSLint has been deprecated in favor of ESLint.

As I disabled TSLint and installed ESLint, all warnings related to subscribtions dissapeared.

Cheers!

answered Apr 03 '21 at 17:27

Smokovsky

569
1
7
21

1

Props to this answer! When it comes to the error in VS Code, this solves everything. Remove the TSLint extension and install the ESLint extension. – Mike R Apr 07 '21 at 14:32
If you do this through npm uninstall/install, be sure to restart VSCode for the change to take effect. – Craig May 11 '21 at 15:03

score 12 · Answer 2 · answered Mar 12 '21 at 18:09

To answer your question "So how do I subscribe to things now": https://rxjs-dev.firebaseapp.com/guide/observer This is it. It is easy to use and pretty similar to what has been done before with the small change that it actually now accepts an object (observer) with 3 keys: next, error, complete.

We had the same discussion like 2 days ago at work and altough you can/should use the observer the deprecation seems to be a false alarm. (We thought we had to change ~900 subscribes):

This is an issue created on the rxjs github page regarding this issue: https://github.com/ReactiveX/rxjs/issues/6060

And in it the devs say it is due to a typescript bug: https://github.com/microsoft/TypeScript/issues/43053

This bug already has been fixed 3 days ago, i am not sure though if it is already in the newest release:

https://github.com/microsoft/TypeScript/pull/43165

Pheew :D So as I understand from this: it's kind of vscode/tslint issue which will probably get fixed soon? — Smokovsky, Mar 12 '21 at 18:22

WasiF · Answer 3 · 2022-07-21T18:39:29.113

5

Better way to solve it

myObservable.subscribe({
    next: (val) => { ... },
    error: (err) => { ... },
    complete: () => { ... }     
})

edited Jul 21 '22 at 18:39

answered Jan 29 '22 at 18:05

WasiF

26,101
16
120
128

Angular 11: subscribe is deprecated: Use an observer instead?

3 Answers3

Linked