Angular 7 HttpClient post request not being sent to nodejs server

Question

My angular 7 app is running using ng serve on port 4200. I have a node server running inside of a docker container, located at localhost:8081.

I have verified that the server is up, and accessible, using postman. The url was localhost:8081/login. I was able to receive the data I expected when the POST request was submitted.

When I click the login button in my login.html form, it calls onSubmit() from the login component class. This calls login(), which then calls a function from the authentication service which creates a POST request to localhost:8081/login.

login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { AuthenticationService } from 'src/app/services/authentication.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private authenticationService: AuthenticationService) { }

  loginForm = new FormGroup({
    email: new FormControl(''),
    password: new FormControl(''),
  });

  ngOnInit() {
  }

  // Called when login form submits
  onSubmit() {
    this.login();
  }

  login() : void {
    this.authenticationService.login(this.loginForm.controls.email.value, this.loginForm.controls.password.value);
  }

}

authentication.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import { User } from '../models/user';

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {

  private currentUserSubject: BehaviorSubject<User>;
  private currentUser: Observable<User>;

  constructor(private http: HttpClient) {
    this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
    this.currentUser = this.currentUserSubject.asObservable();
  }

  public get currentUserValue(): User {
    return this.currentUserSubject.value;
  }

  login(email: string, password: string) {
    return this.http.post<any>('localhost:8081/login', {email, password})
      .pipe(map(user => {

        if (user && user.token) {
          // store user details and jwt token in local storage to keep user logged in between page refreshes
          localStorage.setItem('currentUser', JSON.stringify(user));
          this.currentUserSubject.next(user);
        }

        return user;
    }));
  }

  logout() {
    // remove user from local storage to log user out
    localStorage.removeItem('currentUser');
    this.currentUserSubject.next(null);
  }
}

Finally, my node server's endpoint that is being called.

account.js

// Verifies that the email and password exist in the database.
app.post('/login', (req, res) => {
    console.log("in login post");
    res.json({ firstName: 'test', lastName: 'user', email: 'test@gmail.com', password: 'pass' });
});

I removed the other logic so that I can test this with the simplest case; just returning hard coded values.

When I make the request with postman, I see that "in login post" is logged. However, when I make the request from Angular, "in login post" is NOT logged.

Why can I not reach the endpoint from Angular, but I can from postman? The address & port are the same.

score 1 · Answer 1 · answered Jun 02 '19 at 08:10

As mentioned by @Austaras, an Observable must have at least one active subscription in order to execute it.

You must subscribe to the login() method of AuthenticationService in the LoginComponent

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { AuthenticationService } from 'src/app/services/authentication.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private authenticationService: AuthenticationService) { }

  loginForm = new FormGroup({
    email: new FormControl(''),
    password: new FormControl(''),
  });

  ngOnInit() {
  }

  // Called when login form submits
  onSubmit() {
    this.login();
  }

  login() : void {
    this.authenticationService
      .login(this.loginForm.controls.email.value, this.loginForm.controls.password.value)
      .subscribe(   // <-- Subscription required here 
        (res) => {
          console.log(res);
      });
  }

}

Angular 7 HttpClient post request not being sent to nodejs server

2 Answers2