title: Angular HTTPClient (HTTP) requests pending forever
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>server.js</p>
  
  <pre><code>const app = require("./backend/app");
  const debug = require("debug")("node-angular");
  const http = require("http");
  
  const normalisePort = setPort =&gt; {
    const port = parseInt(setPort, 10);
    if (isNaN(port)) return setPort;
    if (port &gt;= 0) return port;
    return false;
  };
  
  const port = normalisePort(process.env.PORT || "8000");
  const server = http.createServer(app);
  
  const error = error =&gt; {
    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 = () =&gt; {
    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");
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>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) =&gt; {
    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;
  
  </code></pre>
  
  <p>users.js</p>
  
  <pre><code>const express = require("express");
  const router = express.Router();
  const db = require("../sql-connection");
  
  router.get("", (req, res, next) =&gt; {
    db.query("select * from users;", (error, results, fields) =&gt; {
      if (results.length &gt; 0) {
        return res.status(200).send(results);
      } else {
        return res.status(404).send();
      }
    });
  });
  
  module.exports = router;
  
  </code></pre>
  
  <p>sql-connection.js</p>
  
  <pre><code>const mysql = require("mysql");
  
  const sqlConnection = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database: "payroll"
  });
  
  sqlConnection.connect(error =&gt; {
    if (error) throw error;
    console.log("connected to database");
  });
  
  module.exports = sqlConnection;
  </code></pre>
  
  <p>auth.service.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>export class AuthService {
    private _BASE_URL: string = "http://localhost:8000/api";
  
    constructor(private http: HttpClient) {}
  
    public get users(): Observable&lt;any&gt; {
      return this.http.get(this._BASE_URL + "/users");
    }
  }
  </code></pre>
  
  <p>signup.component.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>export class SignUpComponent {
  
    constructor(private _authService: AuthService) {}
  
    public onSignUp(): void {
        this._authService
          .users()
          .subscribe(data =&gt; (data ? console.log(data) : console.log("no data")));
    }
  }
  </code></pre>
  
  <p>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.</p>