Angular2 / Electron application using electron API

I have setup an angular2 / Electron app similar to the explanation in this video : https://www.youtube.com/watch?v=pLPCuFFeKOU. The project I am basing my code on can be found here : https://github.com/rajayogan/angular2-desktop

I am getting the error:

app.ts:16Uncaught TypeError: Cannot read property 'on' of undefined

When I try to run this code:

import { bootstrap } from '@angular/platform-browser-dynamic';
import { Component } from '@angular/core';
import { MenuComponent} from './menu';
import { ConfigEditorComponent } from './config-editor';
import { remote, ipcRenderer} from 'electron';

let {dialog} = remote;

//Functions used for select server xml callbacks.
const ipc = require('electron').ipcMain
const xml2js = require('xml2js')
  const fs = require('fs')
var parser = new xml2js.Parser();

ipc.on('open-file-dialog', function (event) {
  dialog.showOpenDialog({
    title:"Select zOS Connect server.xml",
    properties: ['openFile', 'openDirectory'],
    filters: [
      {name: 'XML', extensions: ['xml']},
      {name: 'All Files', extensions: ['*']}
     ]
  }, function (files) {
    if (files){
      fs.readFile(files[0], function(err, data) {
        parser.parseString(data, function (err, result) {
          console.dir(result);
          process_server_xml(event,result);
        })
      })
    }
  })
  })

function process_server_xml(event,json){
  console.log("oh hello!")
  event.sender.send('selected-directory', json)
  console.log("oh im done!")
}



@Component({
    selector: 'connect-toolkit',
    templateUrl: 'app.component.html',
    directives: [ MenuComponent, ConfigEditorComponent ]
})

export class AppComponent {

    constructor() {

        var menu = remote.Menu.buildFromTemplate([{
            label: 'Raja',
            submenu: [
                {
                    label: 'open',
                    click: function(){
                      dialog.showOpenDialog((cb) => {

                      })  
                    }
                },
                {
                    label: 'opencustom',
                    click: function(){
                      ipcRenderer.send('open-custom');
                          let notification = new Notification('Customdialog', {
                              body: 'This is a custom window created by us'
                          })

                    }
                }
            ]
        }])
        remote.Menu.setApplicationMenu(menu);
    }

}

bootstrap(AppComponent);

I think the problem may be:

const ipc = require('electron').ipcMain
    const xml2js = require('xml2js')
      const fs = require('fs')
    var parser = new xml2js.Parser();

Is it possible require doesn't work here, and somehow I need to use import statements instead from my ts files? If this is the case how do I use the import in order to get the ipcMain object and my xml2js etc?

Why would that be the case? How can I make require work within the ts files if this is the problem.

Note that if I remove the require lines, and all the ipc.on code everything runs as expected and works fine (other than the fact that the ipc event is never received ;)

Calling ipcMain doesn't work because you're not on main (i.e., the electron side code, which is on electron index.js file), your are on renderer (web page). Therefore you must use ipcRenderer instead, which is already imported using es6 import syntax on top of your app.ts file. And if you want to make something using electron ipcMain, it have to be done from the electron code side.

import {remote, ipcRenderer} from 'electron';

Electron ipc notes:

ipcMain Communicate asynchronously from the main process to renderer processes.

ipcRenderer Communicate asynchronously from a renderer process to the main process.