Fatal编程技术网
  • typescript/
  • Typescript 无法从浏览器窗口页面导入电子模块

Typescript 无法从浏览器窗口页面导入电子模块

typescript angular electron

Typescript 无法从浏览器窗口页面导入电子模块,typescript,angular,electron,systemjs,Typescript,Angular,Electron,Systemjs,我有一个angular2/typescript应用程序，我已经加载到electron Browser窗口中。此模块通过SystemJS加载。但是，当我通过启动electron运行它时，SystemJS加载程序出错，它试图从文件系统加载electron模块。有人建议我在SystemJS中配置什么来映射它，这样它就可以找到电子模块了吗？我在electron预构建中没有看到任何要映射到的js 更新 添加了main.js内容和错误跟踪。我正在使用maxogden启动我的代码。因此，主进程来自Javasc

我有一个angular2/typescript应用程序，我已经加载到electron Browser窗口中。此模块通过SystemJS加载。但是，当我通过启动electron运行它时，SystemJS加载程序出错，它试图从文件系统加载electron模块。有人建议我在SystemJS中配置什么来映射它，这样它就可以找到电子模块了吗？我在electron预构建中没有看到任何要映射到的js

更新 添加了main.js内容和错误跟踪。我正在使用maxogden启动我的代码。因此，主进程来自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>
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
我通过在主进程中运行ExpressJS来处理通过XHR在渲染器进程中运行的代码的通信，从而解决了这个问题。因此，现在渲染器进程不再需要直接访问electron模块。

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