Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 715
Smokovsky Avatar asked Mar 12 '21 17:03

Smokovsky


People also ask

Is Observable subscribe deprecated?

subscribe isn't deprecated, only the variant you're using is deprecated. In the future, subscribe will only take one argument: either the next handler (a function) or an observer object.

Do you have to subscribe to an Observable?

Sadly, no. There are at least two cases where you should explicitly subscribe to Observables in components and directives. First is when the Observable makes a change to the outside world. Most commonly, this is done by issuing a POST (or DELETE or PUT) through HTTP, meant to update the backend.

What is observer RXJS?

What is an Observer? An Observer is a consumer of values delivered by an Observable. Observers are simply a set of callbacks, one for each type of notification delivered by the Observable: next , error , and complete .

What is the purpose of the subscribe method on an Observable?

The subscriber function defines how to obtain or generate values or messages to be published. To execute the observable you have created and begin receiving notifications, you call its subscribe() method, passing an observer. This is a JavaScript object that defines the handlers for the notifications you receive.

Is subscribe deprecated in angular?

rxjs - Angular 11 - subscribe is deprecated: Use an observer instead of a complete callback - Stack Overflow 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.clienteI...

How to unsubscribe from observables in angular?

Additionally, you should really be unsubscribing from this observable. There are two ways to do this. You could store the value of your observer and unsubscribe in your finalize (and ngOnDestroy) OR use takeWhile to unsubscribe all observables if you have many. This is the recommended way to do it from the angular docs.

Is subscribe deprecated in RxJS?

Subscribe is deprecated: Use an observer instead of an error callback 0 Angular RxJS Subscribe Behavior with Observer object - this in next/error callback 0 Scope issue in next() callback in Observer 3 'subscribe' is deprecated. Use an observer instead of a complete callback

What is the observer pattern in angular?

They are used frequently in Angular and are a technique for event handling, asynchronous programming, and handling multiple values. The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of state changes.


Video Answer


3 Answers

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!

like image 194
Smokovsky Avatar answered Oct 13 '22 15:10

Smokovsky


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

like image 33
Fabian Schmidt Avatar answered Oct 13 '22 15:10

Fabian Schmidt


Better way to solve it

myObservable.subscribe({
    next: (val) => { ... },
    error: (err) => { ... },
    complete: () => { ... }     
})
like image 3
WasiF Avatar answered Oct 13 '22 14:10

WasiF