Encountering a Issue with Http module in Angular

When attempting to call my API using HttpModule, an error is being thrown upon starting the server (please refer to the screenshot). Error Image

The error arises when I try to make a call to the API from the service using Http.post method.

Here is my app.module.ts:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {HeaderComponent} from './header/header.component';
import {AuthComponent} from './auth/auth.component';
import {MarksComponent} from './marks/marks.component';
import {SigninComponent} from './auth/signin/signin.component';
import {SignupComponent} from './auth/signup/signup.component';
import {FormsModule} from '@angular/forms';
import {AppRoutingModule} from './app-routing.module';
import {AuthService} from './auth/auth.service';
import {HttpModule} from '@angular/http';

@NgModule({
declarations: [
AppComponent,
HeaderComponent,
AuthComponent,
MarksComponent,
SigninComponent,
SignupComponent
 ],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
HttpModule
],
providers: [AuthService],
 bootstrap: [AppComponent]
})
export class AppModule {
}

This is my service:

import {Router} from '@angular/router';
import {Injectable} from '@angular/core';
import {Http} from '@angular/http';

@Injectable()
export class AuthService {
  constructor(private router: Router, private http: Http) {

  }
  signUpUser(firstName: string, lastName: string, email: string, password: 
  string) {
       const body: [] = [firstName, lastName, email, password];
       return this.http.post('http://localhost:3000/auth/signup', body).map(data 
    => {
            data = data.json();
            return data;
        });
    }
 }

Answer №1

I believe the issue lies not in HTTP, but rather in an incorrect declaration:

Try using this to define the body:

const body = {conge,user};
this.httpClient.post('http://localhost:8080/api/sendconge', body)
.subscribe(data => {
    console.log(data);
});

The httpClient method is recommended for sending data instead of simple http.

Answer №2

Upon reviewing my approach, I realized I had been using the post method incorrectly. Here is the updated version of my code:

registerUser(firstName: string, lastName: string, email: string, password: string) {
// const body: [] = [firstName, lastName, email, password];
const userCredentials = {
    firstName: firstName,
    lastName : lastName,
    email : email,
    password : password
  };
return this.http.post('http://localhost:3000/auth/register', userCredentials);

}

Answer №3

Make sure to assign a data type to the body array.

For example:

const body: any[] = [firstName, lastName, email, password];

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

How can an Angular4 unit test disregard an HTML tag from a third-party component?

I've exhausted my resources by checking the docs, SO, and attempting various solutions, but I am unable to make this work. The issue arises when writing a unit test for an angular4 application using karma/jasmine. The test is targeting a component tha ...

Angular HTTP post call is failing to redirect to the correct URL

https://i.sstatic.net/CzSuQ.pngCan someone assist me in resolving the http post problem? I am facing an issue where the url validation is not working correctly. Even when localhost:8084 is up and running, the error section is triggered, and the same happen ...

Show the information stored in an array using Angular

I have recently transitioned from using React to learning Angular, and now I am facing the challenge of displaying data from an array. My goal is to implement a dropdown menu where users can select an ID and see the corresponding address displayed. I bel ...

Having trouble with implementing custom checkboxes in a d3 legend?

My attempt at creating checkboxes in d3 has hit a snag. Upon mouse click, the intention is for them to be filled with an "x". Strangely, using d3.select() inside the click-function doesn't seem to work as expected, although adding the letter U for the ...

Recording the details of an Angular project through the utilization of Compodoc

I am currently in the process of documenting my Angular + Typescript application using Compodoc. To install Compodoc, I utilized npm and executed the following command: 'npm install -g compodoc'. And included "compodoc": "./node_modules/ ...

``Using backticks to denote HTML syntax - Leveraging Google Charts to create

Has anyone found a way to incorporate HTML in ticks within a Google chart? I am attempting to insert a weather icon from This is my current attempt: const dailyData = new google.visualization.DataTable(); dailyData.addColumn('timeofday' ...

What's the best way to replicate a specific effect across multiple fields using just a single eye button?

Hey everyone, I've been experimenting with creating an eye button effect. I was able to implement one with the following code: const [password, setPassword] = useState('') const [show, setShow] = useState(false) <RecoveryGroup> ...

What could be causing FormArrayName to consistently display as undefined in my HTML code, even when the safe-navigation operator is employed

Currently, I'm referring to the Angular Material example found at https://angular.io/api/forms/FormArrayName Upon initializing the packageForm formGroup in ngOnInit() and logging it in the console during ngAfterViewInit(), I can see that the translat ...

A guide to iterating over an array and displaying individual elements in Vue

In my application, there is a small form where users can add a date with multiple start and end times which are then stored in an array. This process can be repeated as many times as needed. Here is how the array structure looks: datesFinal: {meetingName: ...

Downgrading from Angular 2.4.9 to 2.4.8: A Step-by-Step Guide

I've searched everywhere and can't figure out how to downgrade @angular/core to version 2.4.8. I installed @angular/cli with version 1.0.0-rc.0 because 1.0.0-rc.1 has some bugs. Now I want to downgrade @angular/core as well because I can't ...

Leveraging Ionic 2 with Moment JS for Enhanced TimeZones

I am currently working on integrating moment.js with typescript. I have executed the following commands: npm install moment-timezone --save npm install @types/moment @types/moment-timezone --save However, when I use the formattime function, it appears th ...

Creating a distinct input for each row in a table using Angular 2

I am encountering an issue with inputs being created for each row in my PrimeNG/datatable. The problem arises from the local variable #itsmIncident, which causes confusion when trying to pass values to the "Save" button as there are multiple rows involve ...

Enable scrolling exclusively for the content within a tab, without affecting the tab label in Clarity Tabs

I have a tab with lengthy content in my project (check out the StackBlitz reference here). This causes the appearance of a scroll. https://i.sstatic.net/ZcNKM.png The corresponding code snippet is provided below: <div class="content-container&qu ...

Utilizing TypeScript to define React interfaces

How can I effectively utilize two interfaces for the same object? For instance: interface interfaceOne { id: string color: string } interface interfaceTwo { id: string numb: number } I have an Item component that is designed to receive an item ob ...

Creating a dynamic type class in TypeScript that can inherit characteristics from another class

Can a wrapper class be designed to dynamically inherit the properties of another class or interface? For instance... interface Person { readonly firstName: string; readonly lastName: string; readonly birthday?: Date } class Wrapper<T> { ...

What is the most effective method for structuring JSON data that is utilized by a single-page application (SPA)?

A colleague and I are collaborating on a single page application (built in React, but the framework used isn't crucial; the same query applies to Angular as well). We have a database with 2 interconnected tables: Feature Car Both tables are linked ...

Mastering TypeScript in Router Configuration

I am currently working with a standard router setup. type Routes = '/' | '/achievements' | ... ; This helps in identifying the routers present in the project. However, I am faced with a new challenge of creating an array that includes ...

Limiting a text based on spaces or at the completion of a word within a string or sentence

Currently, I am utilizing a LimitTo filter to generate excerpts of article descriptions for display on the homepage of a website as snippets in the feature section. The LimitTo filter is set at a maximum of "100 characters," but it sometimes cuts off word ...

Dispersed data points within ng2-charts

After reviewing the ng2-charts documentation at , unfortunately, I did not come across any information regarding a Scattered Plot. Are there alternative methods to create a Scattered plot chart in ng2-charts? Any helpful tricks or customization options a ...

Error: Undefined object trying to access 'vibrate' property

Good day, I apologize for my poor English. I am encountering an issue with Ionic Capacitor while attempting to utilize the Vibration plugin. The documentation lacks detailed information, and when checking the Android Studio terminal, I found the following ...