unable to import electron modules from the BrowserWindow page

Question

I have a angular2/typescript application that I am having loaded into the electron BrowserWindow. The modules for this are loaded via SystemJS. But, when I run it via launching electron, I get an error from the SystemJS loader where it is trying to load the electron module from the file system. Does anyone have any recommendation as what I need to configure in SystemJS to map it such that it can find the electron module? I did not see any js to map to in electron-prebuilt.

Update Added the main.js content and the error trace. I am using maxogden's menubar to launch my code. So the main process is coming from Javascript, and the page that is loaded in the BrowserWindow is in TypeScript.

index.html

<html>
<head>
<title>IR Toolbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/ng2-material/dist/ng2-material.css">
<link rel="stylesheet" href="lib/ng2-material/dist/font.css">

<!-- 1. Load libraries -->
<script src="lib/angular2-polyfills.js"></script>
<script src="lib/system.src.js"></script>
<script src="lib/Rx.js"></script>
<script src="lib/angular2.dev.js"></script>
<script src="lib/router.dev.js"></script>
<script src="lib/http.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script>
  System.config({
    map: {
      'ng2-material': './lib/ng2-material'
    },
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js',
      },
      'ng2-material': {
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>
</head>

<!-- 3. Display the application -->
<body>
  <app>Loading...</app>
</body>
</html>

electron.service.ts

The module in question compiles fine with the typescript compiler.

import {Injectable} from 'angular2/core';
import {ipcRenderer} from 'electron';

@Injectable()
export class ElectronService {
  quit() {
    ipcRenderer.send('mb-app', 'quit');
  }
}

main.js

const ipcMain = require('electron').ipcMain;
const menubar = require('menubar');

const appPath = __dirname;

const config = {
  openDevTools: true,
  title: 'Toolbox'
};

const mb = menubar({
  dir: appPath,
  index: appPath + "/index.html",
});

if (config.openDevTools) {
  mb.on('after-create-window', () => {
    mb.window.openDevTools();
  });
}

// Quit when all windows are closed.
mb.app.on('window-all-closed', () => {
  if (process.platform != 'darwin') {
    mb.app.quit();
  }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
mb.app.on('ready', () => {
  mb.tray.setToolTip(config.title);

  mb.app.allowNTLMCredentialsForAllDomains(true);

  ipcMain.on('mb-app', (event, arg) => {
    if (arg === "quit") {
      console.log('goodbye!');
      mb.app.quit();
    }
  });
});

Error Trace

GET file:///D:/projects/electron/ir-toolbox/dist/electron net::ERR_FILE_NOT_FOUND
  fetchTextFromURL @ system.src.js:1085
  (anonymous function) @ system.src.js:1646Z
  oneAwarePromise @ angular2-polyfills.js:580
  (anonymous function) @ system.src.js:1645
  (anonymous function) @ system.src.js:2667
  (anonymous function) @ system.src.js:3239
  (anonymous function) @ system.src.js:3506
  (anonymous function) @ system.src.js:3888
  (anonymous function) @ system.src.js:4347
  (anonymous function) @ system.src.js:4599
  (anonymous function) @ system.src.js:337
  ZoneDelegate.invoke @ angular2-polyfills.js:322Z
  one.run @ angular2-polyfills.js:218
  (anonymous function) @ angular2-polyfills.js:567
  ZoneDelegate.invokeTask @ angular2-polyfills.js:355Z
  one.runTask @ angular2-polyfills.js:254
  drainMicroTaskQueue @ angular2-polyfills.js:473
angular2-polyfills.js:322 Error: Error: XHR error loading file:///D:/projects/electron/ir-toolbox/dist/electron(…)ZoneDelegate.invoke @ angular2-polyfills.js:322Z
  one.run @ angular2-polyfills.js:218
  (anonymous function) @ angular2-polyfills.js:567
  ZoneDelegate.invokeTask @ angular2-polyfills.js:355
  Zone.runTask @ angular2-polyfills.js:254
  drainMicroTaskQueue @ angular2-polyfills.js:473
  ZoneTask.invoke @ angular2-polyfills.js:425

Could you give the content of your main module and the exact error message? Thanks! — Thierry Templier, Mar 26 '16 at 07:05
I actually dropped TypeScript for my Angular 2 Electron app for pretty much this reason. Though I realize this may not be an option for you. — Max, Mar 27 '16 at 02:08
@Teak This is a proof of concept that I am working on, so I am trying to get it working with angular2. More of as a learning exercise. Thanks. — TJ Tang, Mar 28 '16 at 12:04
@TJTang I still use Angular 2, just with ES5 instead of TypeScript. It's a little harder because the documentation has yet to be completed, but still very doable. — Max, Mar 28 '16 at 13:14
@Teak My planned resolution at this point is to keep TypeScript, but communicate between the main electron process and the renderer process via Express endpoints run from the main process. So I will not reference electron directly from the TypeScript side. — TJ Tang, Mar 28 '16 at 13:23
That looks caused by the same problem I solved in [my answer here](http://stackoverflow.com/a/36666999/322984). — Monsignor, Dec 27 '16 at 20:32

score 1 · Accepted Answer · answered Mar 30 '16 at 20:24

1

I worked around the solution by running ExpressJS from the main process to handle communication from the code running in the renderer process via XHR. So now the renderer process never needs to access the electron module directly.

answered Mar 30 '16 at 20:24

TJ Tang

921
6
17

unable to import electron modules from the BrowserWindow page

1 Answers1

Linked