Joao Garin Joao Garin - 3 months ago 27
Javascript Question

Angular2 and electron accessing browserWindwow object

I am using Angular2 with Electron and WebPack.

I am trying to get a hold to the

BrowserWindow
object https://github.com/atom/electron/blob/master/docs/api/browser-window.md

I am doing on the top of my component

import * as electron from 'electron';


However when doing :

this.authWindow = new electron.BrowserWindow({ width: 800, height: 600, show: false});


I get an error on runtime


ORIGINAL EXCEPTION: TypeError: electron.BrowserWindow is not a function


When logging electron itself looks like just a function so there is no
BrowserWindow
object in it.

function defineProgram(name, opts) {
var program = new Program(name, opts);
return program;
}


In WebPack I am using
webpackTargetElectronRenderer
to target Electron.

The intention is to open a new browser window object much like done here http://manos.im/blog/electron-oauth-with-github/

Answer

To communicate between the renderer process and the main process, you need to use the Remote API (https://github.com/atom/electron/blob/master/docs/api/remote.md).

Something like this should work:

const remote = require('electron').remote;
const BrowserWindow = remote.BrowserWindow;

this.authWindow = new BrowserWindow({ width: 800, height: 600, show: false});
Comments