Electron Desktop App: Using mysql data in a component with Angular2 front end

UPDATE It IS possible to call the db directly from components without communicating with the main thread. Create a DB service:

import {Injectable} from '@angular/core';
const mysql = (<any>window).require('mysql');

@Injectable()
export class DBService {
    connection: any;

    constructor() {
        this.connection = mysql.createConnection({
            host: 'localhost',
            user: 'username',
            password: 'password',
            database: 'db_name'
        });
        this.connection.connect((err) => {
           if (err) {
             console.log('error connecting', err);
           }
        });
    }

    query(sql: string) {
        this.connection.query(sql, function(err, results, fields) {
            console.log('err', err);
            console.log('results', results);
            console.log('fields', fields);
        });
    }
}

Then, within any of your Angular 2+ components:

import {Component, OnInit} from '@angular/core';
import {DBService} from './services/db.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private db: DBService) {}
  ngOnInit() {}
  getProducts() {
      this.db.query('SELECT * FROM product');
  }
}

Old Answer

This is my current workaround to connect to mysql with Angular 2+.

On main.js:

const {app, BrowserWindow, ipcMain} = require('electron')

const mysql = require('mysql')
const connection = mysql.createConnection({
    host     : 'localhost',
    user     : 'username',
    password : 'password',
    database: 'your_database'
});
connection.connect(function(err) {
    if (err) {
        console.log('connect', err);
    }
});

ipcMain.on('query', function(e, sql) {
    console.log('query received', sql);
    connection.query(sql, function(err, rows, fields) {
        if(err){
            console.log('error executing', err);
            return false;
        }
        console.log('success', rows);
    });
});

create a DB Service (app/services/db.service.ts)

import { Injectable } from '@angular/core';
const electron = (<any>window).require('electron');

@Injectable()
export class DBService {

  constructor() { }

  query(sql: string) {
      electron.ipcRenderer.send('query', sql);
  }
}

(don't forget to add to it to app.modules.ts)

import {DBService} from './services/db.service';
...
providers: [DBService]

Then in any component in your Angular2+ app you can use it:

        import {DBService} from './services/db.service';
        ...
        constructor(private db: DBService) {}
        getProducts() {
           this.db.query('SELECT * FROM product');
        }

Hope this helps.

You don't necessarily need to write the MySQL client code in javascript. You can use the type declarations: https://www.npmjs.com/package/@types/mysql

If you really want to use javascript, then you will need a minimal set of type declarations to be written. Just enough to make the typescript compiler believe that the functions you use do exist. No need for any IPC, after the typescript code gets compiled, at run-time it will just end up in a javascript function calling an other javascript functions.

The key point is that you have to make the typescript compiler believe that the MySQL library exists. To achieve it, you either install the typings from the package linked above, or write a minimal declaration yourself.