Elektron & Angular: fs.existsSync ist keine Funktion

Question

Ich habe ein neues Elektron-Projekt mit Angular erstellt. Ich baue meine App mit dem Angular CLI. Nun, ich möchte von Renderer-Prozess zu Main-Prozess kommunizieren und einen Fehler in Dev-Werkzeuge erhalten:

> Uncaught TypeError: fs.existsSync is not a function 
    at Object.<anonymous> (vendor.bundle.js:72643) 
    at Object.splitPathRe (vendor.bundle.js:72649) 
    at __webpack_require__ (inline.bundle.js:53) 
    at Object.399 (main.bundle.js:54) 
    at __webpack_require__ (inline.bundle.js:53) 
    at Object.400 (main.bundle.js:107) 
    at __webpack_require__ (inline.bundle.js:53) 
    at Object.291 (main.bundle.js:24) 
    at __webpack_require__ (inline.bundle.js:53) 
    at Object.473 (main.bundle.js:234) 
    at __webpack_require__ (inline.bundle.js:53) 
    at webpackJsonpCallback (inline.bundle.js:24) 
    at main.bundle.js:1 

ich dieses Projekt-Template verwenden: https://github.com/auth0-blog/angular2-electron Die Schritte, um diese Fehler zu reproduzieren sind:

git clone https://github.com/auth0-blog/angular2-electron 
npm install 

3.Add folgende Zeile src/app/app.component.ts

const {ipcRenderer} = require('electron'); 

ohne diese Linie läuft die App ohne probl ems. Durch elektronen ich die ipcRenderer auf diese Weise zu verweisen haben ... https://github.com/electron/electron/blob/master/docs/api/ipc-main.md

Ich habe keine Ahnung, was ich falsch und Hoffnung tue, können Sie mir helfen.

Answer 1

Webpack bringt seine eigenen require die node.js' require, also wenn Sie require ein node.js Kernmodul, das webpack an einen Ihrer Dateien oder Abhängigkeiten auflösen kann nicht clobbers, es wirft. (Sie können in Ihrem Stack-Trace sehen, dass es __webpack_require__ enthält. Das liegt daran, dass Webpack alle require s zu __webpack_require__ umschreibt, so dass es sein eigenes internes node.js-esque-System verwendet). Webpack ist für die Web/Browser entwickelt, so dass es nicht mit Knoten aus der Box gut funktioniert. Um es zu umgehen, können Sie dies verwenden: https://github.com/chentsulin/webpack-target-electron-renderer.

Aber ich würde auch gar mit webpack betrachten, sehen: why use webpack with electron

Answer 2

hatte ich ein Problem und die folgende Code löste es. Hoffe, auch deine zu lösen.

In Ihrem yourcustom.component.ts

declare const window: any; 
declare const ipcRenderer: any; 
ipcRenderer = window.require('electron'); 
// then you can continue what you want to do with ipcRenderer.