unable to import electron modules from the BrowserWindow page

问题

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

回答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.

来源：https://stackoverflow.com/questions/36231588/unable-to-import-electron-modules-from-the-browserwindow-page

标签

typescript

angular

electron

systemjs