jquery和fs在angular electronic应用程序(使用ngx electronic)中无法协同工作

Question

所以我有一个angular应用程序，我有jquery库，在组件中，我有

included declare var $;
ngOnInit(){$(document).ready{....}}

我安装了ngx电子导入fs库。

import {ElectronService} from 'ngx-electron'
constructor(private _electronService: ElectronService) { 
this.fs = this._electronService.remote.require('fs');
}

现在，为了让ngx电子工作，我必须在main.js文件中设置以下内容：

webPreferences: { 
nodeIntegration: true,
enableRemoteModule: true,
contextIsolation: false
}

但是，当我这样做时，jquery会停止在浏览器上加载(jquery没有定义(。没有这些网络偏好，jquery运行良好，但这一点_electronicService.remote返回null。如何使Jquery和fs(ngx-electronic(同时工作？

Answer 1

好吧，在过去的24小时里，我深入兔子洞，更好地了解了角度和电子是如何协同工作的，以及电子渲染器是如何工作的。

这个问题的解决方案是使用preload.js，如下所示：

https://github.com/electron/electron/issues/9920#issuecomment-575839738

因此，一个小的补充-为了在组件内部而不是从index.html中使用angular，我们可以跳过index.html中上面注释中的一行。相反，将其放在组件中。此外，您还需要使用const-win=(window(将全局窗口对象提取到组件中

main.jspreload.js

Use the link above for both main.js and preload.js

组件

const win = (<any>window)
ngOnInit(){
win.api.receive("fromMain", (data) => {
console.log(`Received ${data} from main process`);
});
win.api.send("toMain", "some data");

该解决方案既可以从安全立场出发，也可以从渲染立场出发。我不需要修改我的angular应用程序，jquery就可以使用电子了。此外，对fs对象的任何访问都可以从main.js文件中完成，结果可以通过api返回到angular应用程序，而不是通过在web首选项中设置nodeIntegration:true、contextIntegration:false等直接尝试从angular应用程序访问文件系统(fs(。因此，总之，ngx电子并不理想，因为它取决于nodeIntegration是否设置为true。