Warning: Obsolescence of Typescript Detected

Question

Warning: Obsolescence of Typescript Detected

Having an issue with my login code in TypeScript. The 'subscribe' function is deprecated and I'm not sure how to proceed. Can anyone provide some guidance?

doLogin() 
{
  
     this.userService.doLogin(this.loginForm.value).subscribe(
     result => 
     {
     console.log(result);
     localStorage.setItem('userData', JSON.stringify(result));
     this.router.navigate(['/list-user']);
     this.toastr.success('Success', 'Logged In Successfully');
     },
     (error) => 
     {
     console.log(error);
     this.toastr.error('Failed', 'Invalid Credentials');
     });
}

This code worked fine in another project, but now I am encountering a deprecation warning:

@deprecated — Instead of passing separate callback arguments, use an observer argument. Signatures taking separate callback arguments will be removed in v8. Details: https://rxjs.dev/deprecations/subscribe-arguments

angular typescript subscribe

Answer 1

Answer №1

According to the provided reference

import { of } from 'rxjs';
// it is suggested
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') 
})

No longer will you be required to provide multiple callbacks. If necessary, you can use an observable object with the callbacks.

Answer 2

According to the provided reference

import { of } from 'rxjs';
// it is suggested
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') 
})

No longer will you be required to provide multiple callbacks. If necessary, you can use an observable object with the callbacks.

Warning: Obsolescence of Typescript Detected

Answer №1

Similar questions

Running Ng serve is not functioning properly with no indications of errors or messages to identify the issue

Exploring JSONPath in Cypress

Step-by-step guide on integrating a custom JS file into an Angular component

Experiencing problems with npm installation while trying to compile Angular2 source code

What are the best practices for implementing jquery owlCarousel within an Angular 4 component?

Using Angular's asterisk wildcard to correctly match nested routes

Issue encountered while utilizing an observable object within a FormGroup

The Next.js build encountered an error - unable to locate function in next/script module

TypeScript error: Attempting to utilize an argument of type 'any[]' that cannot be assigned to a parameter of type 'SetStateAction<never[]>'

Issues with Ionic 3's ion-slide within an ion-list component causing functionality problems

Is there a way to focus on a specific iteration of the ngFor loop in Angular 9 using jQuery?

Refining Angular service coding techniques

How to access elements by their class name in Angular

What is the most effective way to compare two arrays of objects in JavaScript?

Indicate the location of tsconfig.json file when setting up Cypress

Using *ngIf to verify the presence of an attribute

Creating a blank webpage after including a component tag for an Angular form

Tips for enabling users to import from subdirectories within my NPM package

When using Angular forms, the password or username may be duplicated if entered twice when pressing the

Tips for accessing the PR number in a Node.js GitHub Probot listening for the `pull_request` event