April 25, 2016

Setup Ionic 2 with Electron (TypeScript, Angular2)

Recently i faced the challenge to create a cross platform application for desktop, mobile and browser. Since Angular 2 Material is not yet ready but a Angular 1 to Angular 2 migration would be a pain in the ass I decided to go with Ionic 2 as scaffold for all devices. And then, when Angular 2 Material is ready it should replace Ionic 2 on Desktop and in Browser.

1.) The set up with was surprisingly easy. First of all make sure to have ionic 2 installed.

2.) To kickstart the Ionic 2 project. TypeScript is not required, but recommended, although you can do anything shown here with JavaScript as well.

3.) Browse to your app and install electron.

4.) Now go to your package.json file and add the required scripts for electron to start in dev mode with auto reload and in dist without.

5.) So your full package.json should look like this:

6.) Next step is to create the in “main” mentioned electron.js script. This script is basically the setup for your electron app.

7.) Your project structure will now look like this:

8.) Thats it! Now you can fire it up:

 

 

 

Ionic2-and-ElectronIonic 2 running in Electron

 

 

Run Ionic 2 in Electron always in Windows Design

By default Ionic 2 runs in Material Design if no special platform is detected (e.g. when running in browser. But also when running on Linux Electron!). So you might want your electron App to run with Windows Theme on all platforms. The simplest way to do so is to add a Ionic Config Parameter to the URL. They have to be prefixed with “Ionic” and the fist letter is always uppercase. See the given example below of the modified electron.js.

 

Related Posts

Can Kattwinkel
Developer at thecodecampus </>


19 responses to “Setup Ionic 2 with Electron (TypeScript, Angular2)”

  1. Sebastian says:

    Hi,

    thanks for sharing this example!
    I tried to follow your instructions but I’m not able to run “npm run-script electron” successfully. I get the following error: https://postimg.org/image/717cf4hip/
    I guess you are not running windows, but maybe you still have an idea what’s going wrong here?

    Thanks 🙂

  2. Can Kattwinkel says:

    I’m not too familiar with Electron on Windows but why is the error from MS JScript?

    What happens when you run “electron” from the commandline? Maybe you need it global

  3. Sebastian says:

    After starting from scratch it is working now, but I have no idea why :/

  4. Stefan says:

    looks nice. However: (1) using rendererprocess with browserify in ionic app and (2) more horrible using typescript with electron. so so painful 🙁

  5. Dave says:

    @Stefan Just use typings (npm i -g tsd)

  6. When running the electron command (by script or directly on the Windows Command Line), it just opens electron.js in notepad++.

    Do I need to change the default app for *.js files to something else?

  7. Can Kattwinkel says:

    Hello Jürgen,

    what command are you firing exactly? npm run electron in the project folder should do open a electron window showing your app.

    • Hi Can,

      i used “electron .” and “npm run-script electron”. T

      The issue was with “electron.js”, which overloaded electron.exe on the command line while me being in the app’s main directory. Once I changed it to main.js like in the electron starter example it worked.

      So to improve this blog I suggest not mixing up electron binary and JS file names, at least with Windows.

      Best regards,
      Jürgen

  8. Christophe K. says:

    That’s an amazing tutorial that shows how simple electron integrates your project.
    Thanks for sharing that!

    (I confirm the ‘electron’ file/binary confusing Windows platform).

    Christophe K.

  9. Luca says:

    Hi. Nice tutorial.
    Can you help with the packaging of the app using electron-package or electron-build? I gave it a try but could not come out with a working app. 🙂

    • Sam says:

      Hi Luca,

      Did you ever get a response about how to use electron-builder in this example? I’m stuck at this point as well.

      Thanks.

  10. Gauzy says:

    Hi Can,

    Being absolutely new to both Ionic 2 and Electron I am glad I stumbled upon your tutorial.

    Very very helpful and nicely organized, step-by-step tutorial to get up and running with embedding Ionic 2 in Electron.

    I am not sure if you are still following up with this blog. Just checking if you have any suggestion for me to get past my issue after following your steps to the ‘T’! 🙂

    In my case, “ionic serve” works fine…it opens up the Ionic 2 app in a browser window. But when I run “npm run-script electron” or “electron .” command it is opening up the Electron window for Desktop application but does not render the Ionic app in it. It does show the HTML Title correctly in the title bar of Desktop application window so looks like it’s a problem with rendering the content. Not sure where and what to look for.

    Any help will be greatly appreciated!

    • Can Kattwinkel says:

      Hello Gauzy,

      have you checked for errors in console of Electron? In order to do so, use Ctrl+Shift+I or F12.

  11. Olli says:

    hi can,

    it worked fine for me. Thanks a lot! i only had to replace the > String with > in the electron.js

    kindly
    Olli

  12. rut says:

    Thanks for the good blog.
    I have two question:

    1. Following to your blog, it look like that if I have exist ionic-2-app, I can also install electron and it will work Did I understand you well?

    2. You wrote:
    “And then, when Angular 2 Material is ready it should replace Ionic 2 on Desktop and in Browser”.

    Is it so necessary?
    My customer want me to continue use the same project, and only build new html and css pages, and cause electron to load them whan I on desktop.
    I must use Ionic if I want to do that because my logic pages (typescript) are base on Ionic.
    Is it possible to ue Ionic-2 for desktop-site also?

  13. Sarath says:

    Hi,

    I am trying to run the application using windows machine.I tried to follow your instructions but I’m not able to run “npm run-script electron” successfully. I get the “Microsoft script compilation Error” from ms script.

    Please suggest what will fix this problem.

  14. hai nguyen says:

    Hi Sarath,

    You should rename ‘electron.js’ to ‘main.js’ or other name

    and update ‘package.json’ with new name of ‘main’ property.

    Because when we run ‘electron .’, Windows will try to execute the ‘electron.js’…

  15. Oliver says:

    Hi Guys,
    i am new as well to this topic.

    Followed the tutorial and at the end there is a JS-error. Tried to rename the electron.js file to main.js, but did not help.

    This is the error msg:
    Uncaught Exception:
    /Users/oliver/Development/IonicProjects/ionic2-electron/main.js:29
    win.on(‘closed’, () => {
    ^^
    ReferenceError: Invalid left-hand side in assignment
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at loadApplicationPackage (/Users/oliver/Development/IonicProjects/ionic2-electron/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:283:12)
    at Object. (/Users/oliver/Development/IonicProjects/ionic2-electron/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:325:5)
    at Object. (/Users/oliver/Development/IonicProjects/ionic2-electron/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:361:3)
    at Module._compile (module.js:571:32)

    • kasper says:

      It’s hard to tell what the issue is without more context, but you should check the syntax near line 29 of your main.js file… Also, make sure that the thing to the right of the equal sign is a greater-than sign (i.e. =>) and not the HTML code for it (%gt;)

Leave a Reply

Add code to your comment in Markdown syntax.
Like this:
`inline example`

```
code block
example
```

Your email address will not be published.