CODEWITHSUNDEEP
callbackrxjsdeprecatedtslintsubscribe
ismaestro
ismaestro

Reputation: 8267

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

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!

Upvotes: 349

Views: 310878

Answers (10)

Mady
Mady

Reputation: 41

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");
        },
});

Upvotes: 3

Vikram Kumar
Vikram Kumar

Reputation: 547

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: () => { }
  }
);

Upvotes: 22

Gautam Pandey
Gautam Pandey

Reputation: 361

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') 
})

Upvotes: 36

Lahar Shah
Lahar Shah

Reputation: 7664

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"
  ]
}

Upvotes: 4

Raslan N. Kiwan
Raslan N. Kiwan

Reputation: 35

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.

Upvotes: 1

Paritosh
Paritosh

Reputation: 11570

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

VSCode status bar

TypeScript version selector

Select local TypeScript version

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.

Upvotes: 55

inorganik
inorganik

Reputation: 25535

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();
});

Upvotes: 2

Simon_Weaver
Simon_Weaver

Reputation: 146160

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.

Upvotes: 23

magikMaker
magikMaker

Reputation: 5607

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.

Upvotes: 176

martin
martin

Reputation: 96959

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:

Upvotes: 507

Related Questions