Usar mysql con NodeJS y Angular

Servidor:

package.json

{
  "name": "servidor",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.18.2",
    "express": "^4.16.2",
    "method-override": "^2.3.10",
    "mysql": "^2.15.0"
  }
}

app.js

var express = require("express"),
    app = express(),
    bodyParser  = require("body-parser"),
    methodOverride = require("method-override");

  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();
  });

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

var router = express.Router();

router.get('/', function(req, res) {
   res.send("Hello World!");
});

router.get('/prueba', function(req, res) {
    var p = [{nombre: 'carlos', apellido: 'russo'},
             {nombre: 'karina', apellido: 'ortiz'}];
 
    res.send(p);
  });

router.get('/sql', function(req, res) {
    var mysql = require('mysql');

    var con = mysql.createConnection({
      host: "Xmantis",
      user: "root",
      password: "p23423423023r2234234rd",
      port: 3360,
      database: "mantis"
    });
   
    con.connect(function(err) {
      if (err) throw err;

      console.log("Connected!");
    });

    con.query(
        'SELECT * FROM X_sector WHERE id > ? and id < ?',[ 4, 20 ],
        function (err, results) {   
            console.log(results);
            res.send(results);
        }
    );     
});

app.use(router);

app.listen(8080, function() {
    console.log("Node server running on http://localhost:8080");
});


Para hacerlo funcionar:

npm install
nodemon app.js (si no esta instalado nodemon, instalarlo con npm install -g nodemon)

y probarlo con:

http://localhost:8080/prueba


Cliente

package.json

{
  "name": "cliente",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.5",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

datos.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class DatosService {

  constructor(public http: Http) { }

  result:any;

  desplegar() {           
    return this.http.get("http://localhost:8080/sql")       
    .map(res => res.json());         
  }       
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { HttpModule } from '@angular/http';
import { DatosService } from './datos.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [DatosService],
  bootstrap: [AppComponent]
})
export class AppModule { }


app.component.ts

import { Component } from '@angular/core';
import { DatosService } from './datos.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  datos : any;

  constructor(private data : DatosService) {}

  desplegar() { 
             
    this.data.desplegar().subscribe((posts) => {       
      console.log(posts);       
      this.datos = posts;
    });
  }   
}


app.component.html

<h1>Prueba MySql</h1>

<button (click)='desplegar()'>Click!!</button>

<ul>
  <li *ngFor="let d of datos">{{ d.nombre }}</li>
</ul>