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

2023年2月14日 237次阅读

我的目标是将
Angular 2’s 5 Minute Quickstart转换为电子应用程序.我可以通过添加“electron-prebuilt”来做到这一点.

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

我不能做的是利用Electron的任何扩展captabilite – 例如写入文件系统.

我可以构建并运行“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控制台出错

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

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

最佳答案 由于模块加载器之间的差异,我遇到了同样的问题.我根据应用程序的构建方式使用不同的解决方案.

的WebPack：

Webpack将所有模块和依赖项捆绑到一个生成的app.js中(取决于配置).在这种情况下从’fs’导入{readFile},工作正常.演示应用程序Electrogram正在使用webpack.

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

SystemJs

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

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

希望这可以帮助.

(PS.我能理解所有这些吗？不,我不……)

点赞