Subscribe is deprecated: Use an observer instead of an error callback
CallbackRxjsDeprecatedTslintSubscribeCallback Problem Overview
When I run the linter it says:
subscribe is deprecated: Use an observer instead of an error callback
Code (from an angular 7 app with angular-cli):
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!
Callback Solutions
Solution 1 - Callback
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:
Solution 2 - Callback
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.
Solution 3 - Callback
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.
Solution 4 - Callback
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.
Solution 5 - Callback
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')
})
Solution 6 - Callback
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)
-
Add eslint:
ng add @angular-eslint/schematics
-
Convert tslint to eslint:
ng g @angular-eslint/schematics:convert-tslint-to-eslint
-
Remove
tslint
andcodelyzer
:npm uninstall -S tslint codelyzer
-
If you like to auto fix many of the Lint issues
ng lint --fix
(It will also list the not fixed issues) -
In VSCode uninstall the
TSLint
plugin, installESLint
plugin and Reload the VSCode. -
Make sure it updated the package and package-lock files. Also the node_modules in your project.
-
If you have the
tsconfig.json
files under sub directory - you need to add/update theprojects-root-directory/.vscode/settings.json
with the sub directory where thetsconfig
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
Solution 7 - Callback
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();
});
Solution 8 - Callback
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.