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

【问题标题】：Loading Electron Modules in Angular 2 TypeScript Application在 Angular 2 TypeScript 应用程序中加载电子模块
【发布时间】：2016-12-19 00:50:06
【问题描述】：

我的目标是把Angular 2's 5 Minute Quickstart 变成一个Electron 应用程序。我可以通过添加“电子预建”来做到这一点。

我不能做的是利用 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 模块？

【问题讨论】：

我刚刚安装了 Electrogram 并在 app.ts 中的类 App 的构造函数中添加了以下行：“writeFile('./aaa.txt', 'bbb');” （不带引号...）并且文件写在项目的根目录中...您对 Electrogram 做了什么更改？
不是我无法让 Electrogram 工作，而是我无法让 electron 导入 5 分钟快速启动应用程序并让它找到 FS 模块。
我刚开始玩 ts/js，偶然发现不兼容的模块加载器、客户端与服务器、导入与要求等。对于像我这样的简单 C#、Python、Php、Android 开发人员来说太混乱了。 .. 我没有尝试将电子添加到快速启动，而是将快速启动应用程序文件夹添加到工作电子应用程序（Electrogram）中。这对我有用...
现在找到解决方案了吗？

标签： angular typescript electron systemjs

【解决方案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。我明白这一切吗？不，我不明白……）

【讨论】：

有趣的是，这只发生在“fs”模块上，但“路径”没有问题——尽管两者都是在同一个模块文件中的 require'd()...
@JindrichVavruska 正如我所说...我不知道幕后发生了什么...