Electron & Angular: fs.existsSync is not a functio

Question

I've created a new Electron-Project with Angular. I build my app with the Angular CLI. Now, I want to communicate from Renderer-Process to Main-Process and get an error in Dev-Tools:

> 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

I use this Project-Template: https://github.com/auth0-blog/angular2-electron The steps to reproduce this error are:

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

3.Add following line to src/app/app.component.ts

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

Without that line, the app runs without any problems. Due to electron I have to reference the ipcRenderer that way... https://github.com/electron/electron/blob/master/docs/api/ipc-main.md

I have no idea what I am doing wrong and hope, you can help me.

Answer 1

You can use like below

const { BrowserWindow } = (<any>window).require('electron')

Answer 2

I had a problem and the below code solved it. Hope to solve yours too.

In your 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.

Answer 3

Webpack brings its own require which clobbers node.js' require, so when you require a node.js core module that webpack can't resolve to one of your files or dependencies, it throws. (You can see in your stack trace that it includes __webpack_require__. That's because webpack rewrites all requires to __webpack_require__ so that it uses it's own internal node.js-esque system). Webpack is built for the web/browsers so it doesn't play well with node out of the box. To get around it you can use this: https://github.com/chentsulin/webpack-target-electron-renderer.

But I'd also consider using webpack at all, see: why use webpack with electron

Answer 4

`

declare var window: ElectronWindow;

interface ElectronWindow {
    process: any;
    require: any;
    sudo: any;
}

let _rawRequire;
if (window && window.require) {
    _rawRequire = require;
    require = window.require;
}

/*** import the node module here ***/
import * as childProcess from 'child_process';
import { app, shell, ipcRenderer, OpenDialogOptions } from 'electron'
import { ChildProcess } from "child_process";
// import sudo  from 'sudo-prompt';
import Sudoer from 'electron-sudo';


if (_rawRequire) {
    require = _rawRequire;
}

/***  import the angular module here ***/
import { TS } from "typescript-linq";
import Exception = TS.Exception;
import { Injectable } from '@angular/core';
import { ElectronService } from "ngx-electron";

`