How to use electron APIs inside angular2 app


#1

I am new to electron and Angular2 world so my question might seems a bit too basic.

I want to build a desktop app for mac and windows using angular2, so I chose electron as its a great framework. I managed to load angular quickstart app from angular official page inside electron shell and it was great, however the problem arise when I tried to import electron API’s to use them in my component.
I am not sure what all settings it needed to achieve that, if someone who knows the answer will appreciate to help us


#2

I think what you might be looking for is the remote package. This allows you to access Electron’s main process from your Angular app, which is running in the renderer process.


#3

Hi @riebschlager,
to be honest I am at the begining level, what I want to know is how to import lets say ipcRenderer or BrowswerWindow or any other electron API’s inside my angular component for example take a look at following snipet

import { Component } from '@angular/core';
import { ipcRenderer } from "electron";

@Component({
selector: 'my-app',
templateUrl: `./app.component.html`,
})
export class AppComponent  {
AppComponent(){}


 openFile() {
  ipcRenderer.send('open-file-dialog');
 }
}

here ipcRenderer is always undefined :frowning:
also I would be happy if you help me with where should my main process code reside, should it be separate file from angular component or in an angular service , and where to include them, does main,ts of elecctron is where I need to include all my main processes to be included?

Thanks in advance


#4

I’m not 100% sure, but I don’t think you can use ES6 imports in Electron like that. Maybe?

Do you have any luck if you change that second line to:

const { ipcRenderer } = require('electron');

Or maybe try the import slightly differently?

import electron from "electron";
const { ipcRenderer } = electron;


#5

unfortunately does not work :frowning:

just for your information I am loading electron in system.config.json as follows

  var ELECTRON_DETECTED  = (window && window.process && window.process.type) == "renderer";

  if (ELECTRON_DETECTED) {
    console.log("Electron Version");
    System.set('electron', System.newModule(require('electron')));
  } else {
    console.log("Web Version");
    System.set('electron', System.newModule({})); // Makes dummy
  }

#6

I have used electron-forge to create my project seed and everything working as expected, I’ll check how its been done in that seed and it can help me to replicate the required changes. but it would be great if everything done from the scratch by us without being to worry about extra stuff which you might never use


#7

In order to import something into a component, you have to set it up in systemjs and in 2 places in app.module.ts Take a look at the existing set ups in your quickstart to see how to do it.


#8

Do you mean I need to map electron to its directory right?
I did but since there is no electron.js or index.js file in electron directory being downloaded by running npm install -g electron in node_modules folder it wont work and throw error can not find electron…


#9

I have also tried to use electron API within angular2 components and have my troubles. I created a project with angular cli and added electron.
Trying to require via
const { ipcRenderer } = require('electron');
results in a compile error (Cannot find name require)

Using
import electron from "electron"; const { ipcRenderer } = electron;
compiles, but leads to a runtime error (fs.existsSync is not a function - stacktrace is referencing webpack require !?)


#10

I believe it´s due to the fact that the packacking mechanism ( i guess systemjs for you ) doesn´t know how to use native modules from nodejs.

With webpack, i had to define that the renderer process is split ( uses both web api and node apis). I´m unsure of how you do that with systemjs.

a quick fix for you though is to use this with systemJS:

<script> System.set('electron', System.newModule(require('electron'))); </script>

That makes it so systemJS knows of electron.


#11

Thanks for your reply, to be honest I am very new with systemjs/ webpack i was using systemjs since i started my POC using official angular seed, is it possible to share your settings or create a simple boilerplate on github


#12

Hello there.

I´m terribly sorry that i haven’t replied before now.
Been busy and on a cruise.

Anyways, i do not currently have an open repository, but if you still need some settings/boilerplate i´ll be happy to look at it over the weekend and share a repo sometime next week.

Regards
PH


#13

Hello @sohail85 did you find something that is worth implementing ? Actually I am facing the same error .
I am using angular 4 and need to created folders in system based on some input getting from service .

Please help me to solve this .


#14

Hi everyone,

Did you find a solution? I have the issue when running ipcRenderer.on() with my Angular application. :frowning:


#15

Run the command npm install electron @types/electron Then import it normally using

import { ipcRenderer } from ‘electron’.

If you run into any problems, try to run npm eject, a webpack.config.js will be generated, add “target”: “electron-renderer” at the top of module.exports and you are good to go


#16

Here is Electron with Angular (and material) by systemjs:


#17

@ochui its showing error fs.existsSync is not a function


#18

Hello,
Thanks in advance,Can you help.how to use api inside angular2 app in electron.js. i am using angular2,node.js,mongodb