Fs does not work when integrating Electron into an Angular project

Question

I have some problems with integrating Electron. When I use it as described in this post in the blog , and it works. Problems arise when I want to use the Electron import (electronic.remote) to use it in the Angular2 service so that the application uses desktop features such as system dialogs and file system access.

When I download the application, I get the following error: in electronic /index.js, which is included in the webpack package:

Uncaught TypeError: fs.existsSync is not a function (index.js:6)

The file looks pretty simple:

var fs = require('fs')
var path = require('path')

var pathFile = path.join(__dirname, 'path.txt')

if (fs.existsSync(pathFile)) {
module.exports = path.join(__dirname, fs.readFileSync(pathFile, 'utf-8'))
} else {
throw new Error('Electron failed to install correctly, please delete node_modules/' + path.basename(__dirname) + ' and try installing again')
}

//////////////////
// WEBPACK FOOTER
// ./~/electron/index.js
// module id = 609
// module chunks = 2

, . , path (). , fs , Object , NodeJS 6.

API service.ts, :

import * as electron from 'electron' ;
import {Injectable} from '@angular/core' ;

@Injectable()
export class Electron {
getRemote(): any { return electron.remote ; }

, app.module.ts. , .

, devDependencies, dt ~ node dt ~ electronic ( typings/global/electron/index.d.ts , tsc Promise <any>, , ).

API (electron.remote), , , . , .

, ? nodejs, , , require() fs , fs?

(process.versions ):

ares:"1.10.1-DEV"
atom-shell:"1.4.14"
chrome:"53.0.2785.143"
electron:"1.4.14"
http_parser:"2.7.0"
modules:"50"
node:"6.5.0"
openssl:"1.0.2h"
uv:"1.9.1"
v8:"5.3.332.47"
zlib:"1.2.8"

NodeJS, , - 6.9.3 x64 Windows.

Answer 1

@ccnokes :

Webpack , clobbers node.js, , node.js, - , . ( , webpack_require. , webpack , webpack_require, node.js-esque). Webpack -, .

ngx-, , , ( ), Electron Angular ( ).

Vjekoslav Ratkajec:

index.html

<script>  const electron = require('electron');  </script>

:

declare const electron: any;

, Postscript.

webpack-target-electronic-renderer, , webpack, , !

,