Ionic 2 + Electron

[ssreekanth]

Documentation talks about support for Electron here at
http://ionicframework.com/docs/overview/#browser-support

However, I do not see any documentation or any boilerplate for Electron app using Ionic 2.

Hoping to get help from Ionic 2 team.

[spiraljacobs]

Agreed. Would really, really appreciate information on Electron support and how to develop dual apps in Ionic2. Support seemed very promising with their announcement of first class Electron support for Beta 7, but there's been basically no mention since, which doesn't seem super first class. I know they're busy, but hopefully this will be rectified soon.

[jgw96]

Hello all! Sorry for the confusion here. While it is totally possible right now to build an Electron app with Ionic 2, we do not currently have a build process set up for it so it requires a little bit of setup on the developer's end. After we get Ionic 2 stable out we will be looking into providing more infrastructure around using Electron with Ionic 2.

[spiraljacobs]

Thanks so much for an answer, @jgw96 ! Understandable. I currently have an Electron application that I'd like to port over to Ionic2, so any information would be fantastic.
Thanks again!

[chron0]

I have something working here, it may serve others or the ionic team to save time as well:

https://github.com/apollo-ng/governess/blob/master/governess-app/electron.js
apollo-ng/governess@13f60f8

[ssreekanth]

@chron0 I tried building app from your repo. However, when I run it, app just shows white blank page and there are no errors thrown on console too. Not sure, what worked for you.

Could you let us know the steps to build/run your app? Also, Have you tried require('electron') from app's renderer process?

[chron0]

Where exactly do you get a blank page? It works here and I was hoping an ionic2 app would be pretty much contained/constraint by its package.json. It lints/compiles without a problem here. As for electron, I do have a system wide instance of electron available (due to atom) - don't know if it makes a difference since electron should be bundled/used locally from package.json

From left to right:

• Dev Server/Browser
• Electron dev (needs ionic serve running)
• Electron build

As stated in README.md:

Run in Electron wrapper

$ npm run electron

Electron Build

Linux

$ npm run electron-dist-linux-x64

However, there are a couple of issues with ion-icons and toggle switches which I could spot not working in electron for yet unclear reasons.

[thierce]

I am able to get an Ionic2 app in Electron working, briefly outlined here:
https://forum.ionicframework.com/t/embed-ionic-2-app-in-electron-for-desktop-application/74123

However, getting IPC to work has been a nightmare.
If there is any further on IPC implementation - I would love to hear about it.

[jgw96]

Hello all! I am going to close this issue now as i cannot reproduce this anymore. For an example of Ionic 2 working in electron check out this example i made of the conference app running in electron. The instructions on how to run it are in the readme

[ssreekanth]

@jgw96 Thank you for providing an example. Appreciate it. However, I'm still not able to use electron/node modules in renderer (ionic app) code. I have followed the instructions from http://ionicframework.com/docs/v2/resources/third-party-libs/, but no luck.

With the following code after installing library electron and type definitions @types/electron @types/node,

import {remote} from 'electron';
import * as os from 'os';
..
..
console.log(remote.process.versions.electron);
console.log(os.platform());

I see the following error in console

Uncaught TypeError: fs.existsSync is not a function

Hope you have a solution for this one too.. Awaiting your response..

[ssreekanth]

@jgw96 did you get a chance to look into my previous comment?

[orlyapps]

@ssreekanth you found a solution?

[atd-schubert]

I made a workaround with these lines and write a service for IPC in Angular / Ionic:

providers/ipc.ts

import { Injectable, EventEmitter } from '@angular/core';
function unimplemented(...args: any[]) {
    console.error(new Error("This function is not implemented"));
}
let ipcRenderer = {
    on: unimplemented,
    send: unimplemented,
};

eval(`try {ipcRenderer = require("electron").ipcRenderer;} catch(err) {console.warn(err);}`);

export interface IIpcEventEmitter {
    args: any[];
}

@Injectable()
export class IpcService {
    public ipc = ipcRenderer;

    observe(name: string): EventEmitter<IIpcEventEmitter> {
        const eventEmitter: EventEmitter<IIpcEventEmitter> = new EventEmitter();
        this.ipc.on(name, (...args) => {
            eventEmitter.emit({ args });
        });
        return eventEmitter;
    };

    send(name: string, ...args: any[]) {
        this.ipc.send.apply(this.ipc, [name, ...args]);
    }
}

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.