The 'Observable<ArrayBuffer>' type cannot be assigned to the 'Observable<HttpResponse<User>>' type

Hello there, I am currently facing an issue with setting up an authentication service. Whenever I try to login, I keep getting this error message:

Type 'Observable' is not assignable to type 'Observable<HttpResponse>'. Type 'ArrayBuffer' is missing the following properties from type 'HttpResponse': body, type, clone, headers, and 4 more.

The login function in question looks like this:

login(user:User): Observable<HttpResponse<User>>{
    return this.http.post<User>(`${this.apiUrl}/login`, user, {observe: Response});
}

Here is the User model interface:

export interface User {
    username: string;
    password:string;
}

I am calling this function within my login component:

onLogin(user: User):void{
  this.subs.add(
  this.authService.login(user).subscribe(
    (response) =>{
      this.authService.addTokenToCache(response.headers.get('Jwt-Token') || '{}');
      // this.authService.addUserToCache(response.body|| '{}');
      this.router.navigateByUrl("/home");
      this.showLoading=false;
    },
    (error: HttpErrorResponse)=>{
      alert(error.message);
      this.showLoading=false;
    }
  ))
}

Can someone please guide me on how to resolve this issue?

Answer №1

It seems that you have transitioned to using the fetch api interface with the Response method, which may be causing the error you are encountering. The available options for the observe parameter are 'body', 'events', or 'response'. Make sure to pay attention to the lowercase r in response as it is case-sensitive and needs to be a string. In light of this, your code snippet should look like this:

return this.http.post<User>(`${this.apiUrl}/login`, user, {observe: 'response'});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

transform JSON structure into an array

Is it possible to convert an interface class and JSON file into a list or array in order to work on it? For example, extracting the Racename from each object in the JSON file and storing it in a list/array. Here is the interface structure: interface IRunn ...

Attempting to convert numerical data into a time format extracted from a database

Struggling with formatting time formats received from a database? Looking to convert two types of data from the database into a visually appealing format on your page? For example, database value 400 should be displayed as 04:00 and 1830 as 18:30. Here&apo ...

When using Angular, it is important to remember that calling `this.useraccount.next(user)` may result in an error stating that an argument of type 'HttpResponse<any>' cannot be used with a 'Useraccount' balance

When attempting to use this.useraccountsubject(user) to insert information upon login, I encountered an error: ErrorType: this.useraccount.next(user) then Error An argument of type 'HttpResponse' is not allowed against a balance of 'Userac ...

Retrieve the value of [routerLinkActive] in the component's class

Recently, I've been working on a tab component called TabComponent and it includes the following HTML template: <a [routerLink]='link' [routerLinkActive]="[is-active]">link label</a> <button>Close tab</button> The c ...

Error Message: "ESLint Error: Unable to access tsconfig.json file within WebStorm IDE on WSL2 environment"

Encountering an ESLint error when cloning my repository and running npm install on WSL2. The IDE shows this error for all .ts files: ESLint: Parsing error: Unable to read file \\wsl$\ubuntu-20.04\home\project_directory\tscon ...

Trouble with styling the Ngx-org-chart in Angular

I integrated the ngx-org-chart library into my Angular project, but I'm facing issues with the styles not applying correctly. Here are the steps I followed: I first installed the package using: yarn add ngx-org-chart Then, I added the ngx-org ...

The function onClick in Chart.js allows for passing the selected object in Typescript

In the documentation for Chart.js, I found a reference to an onClick function that is triggered whenever a click event occurs on the chart. The code snippet provided looks like this: options: { onClick: this.Function } Function(event, array){ ... } ...

Create data transfer objects in openApi using NestJS without the need for a Controller

In developing a NestJS service that serves as a REST API while also sending messages to NATS, we've successfully utilized the NestJS support for generating OpenAPI documentation and converting it into an SDK for our clients. However, we have encounter ...

Google Chrome - Automatically scroll to the bottom of the list when new elements are added in *ngFor loop

I have a basic webpage showcasing a list of videos. Towards the bottom of the page, there is a button labeled "Load more". When a user clicks on this button, an HTTP request is triggered to add more data to the existing array of videos. Here is a simplifi ...

The application within the Main Module is not being acknowledged by the other components within the module

I am facing an issue with my AngularJS application where the directive I created within the 'FormTest' module is not recognizing the variable 'app' even though it is defined within the same module. The error message I receive is TS2304 ...

Deciphering TS2345: "The argument supplied, known as 'typeof MyComponent', cannot be assigned to the specified parameter type"

I am facing an issue while attempting to integrate a Typescript React component with react-onclickoutside. The error message that I encounter is as follows: TS2345: Argument of type 'typeof MyComponent' is not assignable to parameter of type &apo ...

The process of modifying all interface values in typescript

Suppose I have a function that accepts a dynamic object as a parameter. const fun = <IValues>(values: IValues) => // IValues = {a: '', b: ''} My intention is to use that object and create a clone with the same keys but differ ...

Tips for maintaining a timer reference within a function component

One of the great features in React is the useRef, which allows me to hold onto a reference to an object. I have been working on setting up a repeated call to an API using a timer. Now, when the user clicks stop, I need to be able to stop this repeated call ...

Navigating with nginx

My Angular2 application works perfectly fine when using the local webpack dev server. However, after deploying the application on a server behind nginx, I am facing an issue. I can navigate using application links, but if I enter a URL directly into the br ...

Guide to integrating an Angular 6/7 project as a dynamic plugin within a separate Angular 6/7 project

Currently embarking on a new project in Angular 7, however facing the challenge of incorporating 6 to 8 existing projects into this new platform dynamically as plugins. Your input on the feasibility and thoughts about this strategy would be greatly appreci ...

What is the evaluation process for conditions like someItem?.someField==somevalue in Angular?

Let's consider a simple condition in the markup: someItem?.someField==somevalue What does this mean? Is it equivalent to someItem!=null && someItem!=undefined && someItem==somevalue So essentially, if someItem is undefined, the ent ...

A guide on iterating through various JSON arrays and displaying them in AngularJS

I'm in the process of developing a new school management system and I need to showcase the list of departments along with the courses being offered by each department. The course information is saved in JSON format within the database. Here is my JSO ...

Is it possible for Typescript to automatically determine the exact sub-type of a tagged union by looking at a specific tag value?

I have an instance of type Foo, which contains a property bar: Bar. The structure of the Bar is as follows: type ABar = {name: 'A', aData: string}; type BBar = {name: 'B', bData: string}; type Bar = ABar | BBar; type BarName = Bar[&apos ...

Angular - ngx-Pagination malfunctioning in an unexpected manner

Currently in my Angular project, I am setting up server-side pagination using ngx-bootstrap-pagination with ASP.NET Core-6 as the backend. This is the service implementation: getPaymentStatus(): Observable<IPaymentStatus[]> { return this.http.get& ...

Transmit information to Angular element module

Suppose I have a specific component that I wish to export and utilize as an independent angular-element-component. export class CompanyFormComponent implements OnInit { @Input() public companyId: string; company: Company; companyForm: FormGroup; constru ...