The Angular HttpClient Service will exclusively provide responses that have a status code of 200

I'm facing an issue with my login component where it calls an http client service to send a request to the server for logging in. Everything works smoothly when I enter valid credentials, but if I input wrong credentials, the service doesn't seem to return any response at all.

Below is the method triggered upon clicking the login button:

  submit(){
    this.auth.tryLogin(this.form.getRawValue())
    .subscribe(res => {
      console.log(res);
      if(res.status == 200){
        this.router.navigate(['/'])
      }
      else{
        alert(res.status)
      }
    })
  }

And here's the code snippet for the service:

  tryLogin(data : any) : Observable<HttpResponse<any>> {
    return this.http.post<any>(environment.server + environment.routes.authRoutes.login, data, {
      withCredentials: true,
      observe: 'response'
    })
  }

When I enter the correct credentials, everything works as expected - the response is logged and I'm redirected to the homepage: https://i.stack.imgur.com/YOtFq.png

However, when I enter incorrect credentials, the status code isn't displayed in the alert message and I can't figure out why: https://i.stack.imgur.com/ZNjsX.png

Could it be that I'm using the http client incorrectly? Does it throw an exception when it receives an error code in the response? Is there something crucial that I might have overlooked?

Answer №1

Your code is correct, but it only handles successful cases.

If you examine the Observable object, you will notice that it has various parameters:

const observer = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
}; 

In your scenario, you need to:

submit(){
  this.auth.tryLogin(this.form.getRawValue())
  .subscribe(
    res => {
      console.log(res);
      if (res.status == 200) {
        this.router.navigate(['/'])
      }
      else {
        alert(res.status)
      }
    },
    err => alert(err)
  );
}

For more details, refer to Angular handling error

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

Iterate endlessly over CSS styles in Angular 4

I'm looking to create a website background 'screensaver' by looping through an array of background URLs with a delay between switches. Currently, I have the array stored in my .ts file and I am using the NgFor directive in my HTML. However, ...

Arrange photos in a grid using React Dropzone uploaders

I'm having trouble figuring out how to create a custom preview similar to an image set in a grid using the react-dropzone-uploader component for uploading multiple files. Currently, when I upload images, they are displayed as shown in my normal uploa ...

What is the best way to ensure a specific row remains at the bottom of an Angular table with Material when sorting?

My data table contains a list of items with a row at the end showing the totals. | name | value1 | value2 | --------------------------- | Emily | 3 | 5 | | Finn | 4 | 6 | | Grace | 1 | 3 | | TOTAL | 8 | 14 | I&apos ...

The error message "TypeScript is showing 'yield not assignable' error when using Apollo GraphQL with node-fetch

Currently, I am in the process of implementing schema stitching within a NodeJS/Apollo/GraphQL project that I am actively developing. The implementation is done using TypeScript. The code snippet is as follows: import { makeRemoteExecutableSchema, ...

Is there documentation available for the gcloud output formats, such as the JSON output for each command?

As I work to script the gcloud tool in a TypeScript-aware JavaScript environment known as SLIME, I am utilizing the --format json feature for formatting. The integration is smooth, but I find myself manual analyzing the JSON output of each command to und ...

Encountered an issue: Unable to access the property 'querySelectorAll' of null and Unable to access the property 'getElementsByTagName' of null

*<div class="col-md-12" *ngIf="data_client2.length>0"> <button class="btn print" printSectionId="listVotantesPrint" ngxPrint i18n="@@downloadList"></button> ' <button class=&qu ...

What methods can I use to dismantle an Angular component?

I have created a modal as a component called <modal-component>. Within the <modal-component>, there is a close button. I am looking for a way to completely remove the <modal-component> when this close button is clicked. I envision somet ...

What is the method for adjusting the border color of an ng-select component to red?

I am having an issue with the select component in my Angular HTML template. It is currently displaying in grey color, but I would like it to have a red border instead. I have tried using custom CSS, but I haven't been able to achieve the desired resul ...

Integrating a packaging NPM functionality into Angular for streamlined development

After completing a software engineering assignment, I am struggling with the final requirement. I need to implement an NPM packaging command called "npm build" to compile and publish the front end developed in Angular to the backend project. Initially, I t ...

Enhance user interaction in Angular 13 by animating a selected element using just one animation block

I am currently working on a one-page website project to enhance my Angular skills, and I'm facing a challenge with animating multiple DOM elements using a single animation. Defining the animation for each element individually seems like a cumbersome a ...

When maxSelectedItems is configured for multiple items, prevent further typing in the input field

After the maximum number of items has been selected in a multi select with maxSelectedItems, users should not be able to input any more text into the select field. Visit this link for demos ...

"Exploring the dynamic duo: Algolia integration with Angular

I've been following a tutorial on implementing instantsearchjs in my website, which can be found here. Everything is set up correctly and I can query for results in .JSON format from my website. However, I'm having trouble figuring out how to r ...

Is there a way for me to implement a service method that retrieves the onSnapshot result, allowing me to seamlessly integrate it into my Component or Ionic Page?

Currently, I am using "ionic-angular": "3.7.1" along with Firebase Cloud Firestore. My goal is to retrieve all the documents from the Post collection whenever they are updated, deleted, or added. I have been informed that by calling the onSnapshot Method, ...

Issue: Loading ES Module in MikroOrm and Typescript requires the use of import statement

My attempt to set up a mikrorm configuration for my postgres DB is hitting a snag when I try to run my run-dev script. The issue stems from an ESM compilation error: > yarn dev Error: Must use import to load ES Module: C:\Users\Itay&b ...

Get the most recent two files from a set

I am currently facing a challenge in retrieving the first 2 documents from a collection in google cloud firestore. My current approach involves using the timestamp of the latest document and then calculating the time range to fetch the desired documents. l ...

How to arrange data in angular/typescript in either ascending or descending order based on object key

Hey there! I'm fairly new to Angular and have been working on developing a COVID-19 app using Angular. This app consists of two main components - the State component and the District component. The State component displays a table listing all states, ...

The properties '{ label: string; value: string; }' are required in type 'readonly never[]' for react-select, but they are missing

state = { groupPermissionValue: {label: '', value: ''}, } <Select instanceId="user-group" onChange={this.selectUserGroupOption} value={this.state.groupPermissionValue} options={this.state.groupPermission} i ...

Angular Elements generates compact, single-line HTML output

It's incredibly frustrating how browsers handle inline-block elements, creating invisible margins when placed side by side. You can experience this "bug" firsthand here: http://jsfiddle.net/8o50engu/ Interestingly, if these elements are on the same l ...

Utilizing .js file alongside declaration files .d.ts in Angular: A guide

I am facing an issue with my Angular 7 app where I need to include some typed JS constants from outside of the project. These constants are essential for the AngularJS app and need to be kept in a separate js file. I have defined a new path in the tsconfig ...

In a specific Angular project, the forget password feature is experiencing issues with sending email links in the Chrome browser. Interestingly, this issue only occurs the first

I'm currently working on an Angular 6 application that has been deployed with the domain "www.mydomain.com/". All the routes are functioning properly, such as "www.mydomain.com/dashboard" and "www.mydomain.com/products". However, there is an issue w ...