在Angular 2 TypeScript应用程序中加载电子模块

Question

我的目标是将Angular 2's 5 Minute Quickstart转换为电子应用。我可以通过添加＆＃34;电子预制＆＃34;。

来做

我无法做什么使用Electron的任何扩展功能 - 例如写入文件系统。

我可以构建并运行"Electrogram"，但是当我尝试使用其中包含的一些基本功能时，我在Electron应用程序的控制台中出错：

更改了app.component.ts

import { Component } from '@angular/core';
import { remote, ipcRenderer } from 'electron';
import { writeFile } from 'fs';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1><button (click)="doSomething()">Do Something</button>'
})
export class AppComponent {

  doSomething() {
    writeFile("c:\temp\doSomething.txt", "some data");
  }
}

DevTools控制台中的错误

如何配置应用程序以在正确的位置查找Electron模块？

Answer 1

由于模块加载器之间存在差异，我遇到了同样的问题。我根据应用程序的构建方式使用不同的解决方案。

<强>的WebPack：

Webpack将所有模块和依赖项捆绑到一个生成的app.js中（取决于配置）。在这种情况下import { readFile } from 'fs'，工作正常。演示应用Electrogram正在使用webpack。

对我来说，这是构建应用程序最方便，最快捷的方式，也是运行时性能最佳的方式。

<强> SystemJs

如果SystemJS用作模块加载器，我必须使用以下命令加载FS模块：

let remote = require('electron').remote;
let fs = remote.require('fs');
...
let data = fs.readFileSync(this.dbFilename);

希望这有帮助。

（PS。我能理解所有这些吗？不，我不......）