Subscribe is deprecated: Use an observer instead of an error callback

Question

When I run the linter it says:

subscribe is deprecated: Use an observer instead of an error callback

Code from this angular app:

    this.userService.updateUser(data).pipe(
       tap(() => {bla bla bla})
    ).subscribe(
       this.handleUpdateResponse.bind(this),
       this.handleError.bind(this)
    );

Don't know exactly what should I use and how...

Thanks!

Answer 1

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.

So in your case you should use:

.subscribe({
   next: this.handleUpdateResponse.bind(this),
   error: this.handleError.bind(this)
});

See these GitHub issues:

• https://github.com/ReactiveX/rxjs/pull/4202

• https://github.com/ReactiveX/rxjs/issues/4159

Answer 2

Maybe interesting to note that the observer Object can also (still) contain the complete() method and other, additional properties. Example:

.subscribe({
    complete: () => { ... }, // completeHandler
    error: () => { ... },    // errorHandler 
    next: () => { ... },     // nextHandler
    someOtherProperty: 42
});

This way it is much easier to omit certain methods. With the old signature it was necessary to supply undefined and stick to the order of arguments. Now it's much clearer when for instance only supplying a next and complete handler.

Answer 3

For me, it was just the typescript version my VSCode was pointing to.

Got help from this GitHub comment.

I believe this is a typescript issue. Something in the newest versions of typescript is causing this warning to display in vs code. I was able to get it to go away by click the version of typescript in the bottom right corner of vs code and then choosing the select typescript version option. I set it to the node_modules version we have installed in our angular project which in our case happens to be 4.0.7. This caused the warnings to go away.

Answer 4

Find the details at official website https://rxjs.dev/deprecations/subscribe-arguments

Notice the {} braces in second subscribe code below.

import { of } from 'rxjs';

// recommended 
of([1,2,3]).subscribe((v) => console.info(v));
// also recommended
of([1,2,3]).subscribe({
    next: (v) => console.log(v),
    error: (e) => console.error(e),
    complete: () => console.info('complete') 
})

Answer 5

You can get this error if you have an object typed as Observable<T> | Observable<T2> - as opposed to Observable<T|T2>.

For example:

    const obs = (new Date().getTime() % 2 == 0) ? of(123) : of('ABC');

The compiler does not make obs of type Observable<number | string>.

It may surprise you that the following will give you the error Use an observer instead of a complete callback and Expected 2-3 arguments, but got 1.

obs.subscribe(value => {

});

It's because it can be one of two different types and the compiler isn't smart enough to reconcile them.

You need to change your code to return Observable<number | string> instead of Observable<number> | Observable<string>. The subtleties of this will vary depending upon what you're doing.

Answer 6

The new Way of using RxJS is quit simple:

previous versions:

this.activatedRoute.queryParams.subscribe(queryParams => {
console.log("queryParams, queryParams)

}, error => {
})

New Version:

  this.activatedRoute.queryParams.subscribe(
  {
    next: (queryParams) => {
      console.log('queryParams', queryParams);
    },

    error: (err: any) => { },
    complete: () => { }
  }
);

Answer 7

I migrated my Angular project from TSLint to ESLint and it is now not showing the warning anymore!

I followed these steps. (End of each step I also recommend to commit the changes)

1. Add eslint: ng add @angular-eslint/schematics

2. Convert tslint to eslint: ng g @angular-eslint/schematics:convert-tslint-to-eslint

3. Remove tslint and codelyzer: npm uninstall -S tslint codelyzer

4. If you like to auto fix many of the Lint issues ng lint --fix (It will also list the not fixed issues)

5. In VSCode uninstall the TSLint plugin, install ESLint plugin and Reload the VSCode.

6. Make sure it updated the package and package-lock files. Also the node_modules in your project.

7. If you have the tsconfig.json files under sub directory - you need to add/update the projects-root-directory/.vscode/settings.json with the sub directory where the tsconfig files are!

   {
     "eslint.workingDirectories": [
       "sub-directory-where-tsconfig-files-are"
     ]
   }
   

• Information at VS Code official Page: Migrate from TSLint to ESLint (Thanks for pointing this out in the comment!)
• Angular migrate from TSLint to ESLint Reference

Answer 8

I was getting the warning because I was passing this to subscribe:

myObs.subscribe(() => someFunction());

Since it returns a single value, it was incompatible with subscribe's function signature.

Switching to this made the warning go away (returns null/void);

myObs.subscribe(() => {
  someFunction();
});

Answer 9

You should replace tslint with eslint.

As TSLint is being deprecated it does not support the @deprecated syntax of RXJS. ESLint is the correct linter to use, to do subscribe linting correctly.

Answer 10

The new syntax of subscribe :

 this.fetch().subscribe({
        next: (account: Account) => {
            console.log(account);
            console.log("Your code ...");
        },

        error: (e) => {
            console.error(e);
        },

        complete() {
          console.log("is completed");
        },
});