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

【问题标题】：unable to import electron modules from the BrowserWindow page无法从 BrowserWindow 页面导入电子模块
【发布时间】：2016-07-13 21:31:47
【问题描述】：

我有一个 angular2/typescript 应用程序，已加载到电子浏览器窗口中。为此的模块是通过 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

【问题讨论】：

你能给出你的主模块的内容和确切的错误信息吗？谢谢！
我实际上放弃了我的 Angular 2 Electron 应用程序的 TypeScript 几乎就是这个原因。虽然我意识到这可能不是你的选择。
@Teak 这是我正在研究的概念证明，所以我试图让它与 angular2 一起工作。更多的是作为一种学习练习。谢谢。
@TJTang 我仍然使用 Angular 2，只是使用 ES5 而不是 TypeScript。这有点困难，因为文档尚未完成，但仍然非常可行。
@Teak 我目前计划的解决方案是保留 TypeScript，但通过从主进程运行的 Express 端点在主电子进程和渲染器进程之间进行通信。所以我不会直接从 TypeScript 端引用电子。

标签： typescript angular electron systemjs

【解决方案1】：

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

【讨论】：