Support for Electron and Externals

Please provide us with the following information:

OS?

All OSes

Versions.

1.0.0-beta.26

Repro steps.

clone my electron starter project git clone https://github.com/gregvis/angularcli-electron.git cd into it npm i npm start error in console “Uncaught TypeError: fs.existsSync is not a function”

The log given by the failure.

“Uncaught TypeError: fs.existsSync is not a function”

Mention any other details that might be useful.

In app.component.ts, i have this code: import { Component } from '@angular/core'; const remote = require('electron').remote; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app works!'; constructor() { remote.dialog.showOpenDialog({ title: 'Electron Works!' }); } }

The remote.dialog.showOpenDialog does a call to a nodejs fs function. In order to fix this, I need the require(‘electron’) to be ignored by webpack.

There are 2 ways to do this. In “webpack-build-common”, 1. target: 'electron-renderer' This basically adds a bunch of ‘externals’ that webpack ignores for packing. You can see the code here: https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsApply.js#L70-L185

This does fix the issue, however, there are cases where I would like to be able to add other externals, such as the npm package “drivelist” which uses a “child_process” to get a list of drives connected to the system. It doesn’t work properly if it is bundled by webpack.

So in order for me to use both electron AND drivelist, i added the following to “webpack-build-common”

externals: { 'electron' : 'commonjs electron', 'drivelist' : 'commonjs ' + nodeModules + '/drivelist' }

So ideally, I need a way to add target and/or externals to the webpack build.

[filipesilva]

I know this isn’t the answer you want to hear, but this isn’t a usecase we want to support right now.

I know webpack itself supports many targets but on the CLI, at the moment, we don’t. For your usecase I would say using a custom webpack config would be better.

You can still use the CLI as a generator, and use https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack to get AoT builds.

[Eshva]

The only workable solution I’ve found here: Angular 2 + Electron + Angular-CLI

I managed to access electron API by adding following to index.html:

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

Then in TS you can declare electron and access any method/property:

declare var electron: any;

This is very hackish solution and doesn’t solve problem of os.platform() being browser.