title: Angular 5 HTTP response undefined
body: <p>I am working on a small full stack project with angular and nodejs and express. I have an issue where one of my methods in the dataservice is not returning the data and having debugged it, it states that the return value is undefined.</p>
  
  <p>//Client-Side</p>
  
  <p>Clubs.ts</p>
  
  <pre><code>export interface Clubs {
    id?: number;
    club_name: string;
    specific_category_id?: number;
    club_category_id?: number;
    county_id?: number;
  }
  </code></pre>
  
  <p>app-routing.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  import { NavbarComponent } from './components/navbar/navbar.component';
  import { HomeComponent } from './components/home/home.component';
  import { ClubsComponent } from './components/clubs/clubs.component';
  import { SearchByCountiesComponent } from './components/search-by-counties/search-by-counties.component';
  import { SearchByClubsComponent } from './components/search-by-clubs/search-by-clubs.component';
  import { SearchSportsComponent } from './components/search-sports/search-sports.component';
  import { SearchClubsComponent } from './components/search-clubs/search-clubs.component';    
  
  const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'club-category/search', component: SearchByClubsComponent },
    { path: 'club-category/search/:county_id', component: SearchByClubsComponent },
    { path: 'counties/search', component: SearchByCountiesComponent },
    { path: ':slug/search', component: SearchSportsComponent },
    { path: ':slug/search/:countyID', component: SearchSportsComponent },
    { path: 'clubs/search', component: SearchClubsComponent },
    { path: 'club/:id', component: ClubsComponent }
  ]
  
  @NgModule({
    exports: [RouterModule],
    imports: [
      RouterModule.forRoot(routes)
    ],
    declarations: []
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>search-club-component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Clubs } from '../../models/clubs';
  import { DataService } from '../../services/data.service';
  
  @Component({
    selector: 'app-search-clubs',
    templateUrl: './search-clubs.component.html',
    styleUrls: ['./search-clubs.component.scss']
  })
  export class SearchClubsComponent implements OnInit {
    //Declare Properties
    clubs: Clubs[];
  
      constructor(
        private dataService: DataService
      ) { }
  
    ngOnInit() {
      //Get all Clubs
      this.dataService.getClubs().subscribe(clubs =&gt; {
        console.log('Response has been received ');
        this.clubs = clubs;            
      });
    }
  
  }
  </code></pre>
  
  <p>data.service.ts   </p>
  
  <pre><code>import { Injectable } from "@angular/core";    
  import { Observable } from "rxjs/Observable";    
  import { ClubType } from "../models/clubtype";
  import { County } from "../models/county";
  import { SportCategory } from "../models/SportCategory";
  import { Clubs } from "../models/Clubs";    
  import { HttpClientModule, HttpClient } from "@angular/common/http";
  
  @Injectable()
  export class DataService {
    //Declare properties
    localHost = "http://localhost:3000";
  
    constructor(private httpClient: HttpClient) {}
  
    //Get ClubTypes
    getClubTypes(): Observable&lt;ClubType[]&gt; {
      return this.httpClient.get&lt;ClubType[]&gt;(
        this.localHost + "/club-category/search"
      );
    }
  
    //Get ClubTypes
    getClubTypesByCounty(countyID): Observable&lt;ClubType[]&gt; {
      return this.httpClient.get&lt;ClubType[]&gt;(
        this.localHost + '/club-category/search/'+ countyID
      );
    }
  
    //Get Counties
    getCounties(): Observable&lt;County[]&gt; {
      return this.httpClient.get&lt;County[]&gt;(this.localHost + "/counties/search");
    }
  
    //Get Counties
    getSportCategory(slug): Observable&lt;SportCategory[]&gt; {
      return this.httpClient.get&lt;SportCategory[]&gt;(
        this.localHost + '/'+ slug +'/search'
      );
    }
  
    //Get Specific Category By County
    getSportCategoryByCounty(slug, countyID): Observable&lt;SportCategory[]&gt; {
      return this.httpClient.get&lt;SportCategory[]&gt;(
        this.localHost + '/'+ slug +'/search/' + countyID
      );
    }
  
    //Get Clubs
    getClubs(): Observable&lt;Clubs[]&gt; {        
      return this.httpClient.get&lt;Clubs[]&gt;(this.localHost + "/clubs/search"); 
    }
  }
  </code></pre>
  
  <p>//Server-Side</p>
  
  <p>app.js</p>
  
  <pre><code>const express = require("express");
  const path = require('path');
  const mysql = require('mysql');
  const connectionPool = require('./config/database');
  
  //Create Connection
  const db = mysql.createConnection({
    host:'localhost',
    user: 'someUser',
    password: '******',
    database: 'dataBaseName'
  });
  
  db.connect((err) =&gt;{
    if(err){
      console.log(err);
      throw err;
    }
    console.log('MySQL connected...');
  });
  
  const app = express();
  
  //JSON Prettify
  app.set('json spaces', 40);
  
  // Add headers
  app.use(function (req, res, next) {
  
    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
  
    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  
    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  
    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);
  
    // Pass to next layer of middleware
    next();
  });  
  
  //Set Routes
  const clubcategories = require('./routes/club-categories');
  const counties = require('./routes/counties');
  const sportcategories = require('./routes/sport-categories');
  const clubs = require('./routes/clubs');
  
  
  //Use Routes
  app.use('/club-category', clubcategories);
  app.use('/counties', counties);
  app.use('/sport', sportcategories);
  app.use('/clubs', clubs);
  
  
  //Set port
  const port = process.env.PORT || 3000;
  
  //Set up server
  app.listen(port, () =&gt; {
    console.log(`Server started on port ${port}`);
  });
  </code></pre>
  
  <p>clubs.js   </p>
  
  <pre><code>const express = require("express");
  const router = express.Router();
  const connectionPool = require('../config/database');
  
  //Get clubs
  router.get("/search", (req, res) =&gt; {
    //Get connection from connection pool
    connectionPool.getConnection((err, dbConnection) =&gt;{
      if(err){
        console.log(err);
      } else{
        let sql = 'Select * FROM clubs';
  
        let query = dbConnection.query(sql, (err, clubs)=&gt; {
          if(err) console.log(err);
          console.log(clubs);
          //res.status(200).send(clubs);
          res.json(clubs);
        });
  
        //release connection back to pool
        dbConnection.release();
      }
    });
  });
  
  module.exports = router;
  </code></pre>
  
  <p>The request is received on the server side and and code executed. I see the array of club objects that are logged on the server side console prior to the response being sent. However, on the client side response is undefined (as seen when I debug) The line "Response has been received" that I log on client side is never output. </p>
  
  <p>I have followed this same method for four other calls to the server and have had no issue. I cannot see where I am going wrong in this instance. Can you please help in identifying the issue?</p>