无法从BrowserWindow页面导入电子模块

时间:2016-03-26 04:23:53

标签: typescript angular electron systemjs

我有一个angular2 / typescript应用程序,我已经加载到电子BrowserWindow。这些模块通过SystemJS加载。但是,当我通过启动电子运行它时,我从SystemJS加载器中得到一个错误,它正试图从文件系统加载电子模块。有没有人有任何建议,我需要在SystemJS中配置它来映射它,以便它可以找到电子模块?我没有在电子预制中看到任何要映射的js。

更新 添加了main.js内容和错误跟踪。我正在使用maxogden的menubar来启动我的代码。所以主流程来自Javascript,而BrowserWindow中加载的页面是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

有问题的模块使用typescript编译器编译好。

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();
    }
  });
});

错误跟踪

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 个答案:

答案 0 :(得分:0)

我通过从主进程运行ExpressJS来处理解决方案,以通过XHR处理在渲染器进程中运行的代码的通信。所以现在渲染器进程永远不需要直接访问电子模块。