Angular HTTPClient (HTTP) requests pending forever

Question

I have recently started working with MySQL as the database for my Angular/NodeJS project (I have been using MongoDB all along). Nonetheless, I'm encountering issues when handling HTTP Requests. I have experimented with GET and POST requests as of now, and GET is forever pending, until failure and POST doesn't post to backend and to the database, likewise. I really hadn't changed the backend configuration from the one I used with MongoDB database, except for the queries, of course.

I have tried debugging the backend to check whether the server is actually running and everything was okay. It just came to requests reaching the specified endpoints that they're always pending. I also tried to log to console if a request gets at a certain endpoint, but nothing was being logged, unfortunately.

server.js

const app = require("./backend/app");
const debug = require("debug")("node-angular");
const http = require("http");

const normalisePort = setPort => {
  const port = parseInt(setPort, 10);
  if (isNaN(port)) return setPort;
  if (port >= 0) return port;
  return false;
};

const port = normalisePort(process.env.PORT || "8000");
const server = http.createServer(app);

const error = error => {
  if (error.syscall !== "listen") {
    throw error;
  }
  const bind = typeof port === "string" ? "pipe " + port : "port " + port;
  switch (error.code) {
    case "EACCES":
      console.error(bind + " requires elevated privileges");
      process.exit(1);
      break;
    case "EADDRINUSE":
      console.error(bind + " is already in use");
      process.exit(1);
      break;
    default:
      throw error;
  }
};

const listening = () => {
  const address = server.address();
  const bind = typeof port === "string" ? "pipe " + address : "port " + port;
  debug.enabled = true;
  debug("Listening on " + bind);
};

app.set("port", port);
server.on("error", error);
server.on("listening", listening);
server.listen(port, "localhost");

app.js

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");

const users = require("./routes/users");

const app = express();

app.use(cors);
app.use(bodyParser.json());
app.use(
  bodyParser.urlencoded({
    extended: false
  })
);

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Authorization, Content-Type, Accept"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PATCH, DELETE, OPTIONS"
  );
  next();
});

app.get("/api/users", users);

module.exports = app;

users.js

const express = require("express");
const router = express.Router();
const db = require("../sql-connection");

router.get("", (req, res, next) => {
  db.query("select * from users;", (error, results, fields) => {
    if (results.length > 0) {
      return res.status(200).send(results);
    } else {
      return res.status(404).send();
    }
  });
});

module.exports = router;

sql-connection.js

const mysql = require("mysql");

const sqlConnection = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "payroll"
});

sqlConnection.connect(error => {
  if (error) throw error;
  console.log("connected to database");
});

module.exports = sqlConnection;

auth.service.ts

export class AuthService {
  private _BASE_URL: string = "http://localhost:8000/api";

  constructor(private http: HttpClient) {}

  public get users(): Observable {
    return this.http.get(this._BASE_URL + "/users");
  }
}

signup.component.ts

export class SignUpComponent {

  constructor(private _authService: AuthService) {}

  public onSignUp(): void {
      this._authService
        .users()
        .subscribe(data => (data ? console.log(data) : console.log("no data")));
  }
}

When subscribed to the users observable data from backend should logged to console if present, otherwise, 'no data' is logged on the console. Unfortunately, this request takes forever (pending). However, if I don't subscribe to users no request is sent/seen under network tab in dev tools.

user_14206650 · Answer

I've been using MYSQL database and I would recommend using mysql2 over mysql

mysql2 provides promise based syntaxes over conventional callback methods. Here's the documentation for Mysql2 for nodejs.

Coming to the problem, I guess it might be because Nodejs is asynchronous while you're using a synchronous approach in setting up the API. Also when you're working with Asynchronous programming you have to use try-catch-finally instead of conventional if-else statements to log the errors.

So you can use async (req, res, next)=>{ //your code here } rather than just using (req, res, next)=>{ //your code here }.

Also you have to await before calling the sql query, i.e; await db.query

or

rather in mysql2 it is easier to use const [data] = await pool.execute(query, [params]).

Angular HTTPClient (HTTP) requests pending forever

1 Answers