Support for Electron and Externals

[gregvis]

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.

[vilarone]

I maked a repository with a temporaly solucion and example in https://github.com/vilarone/ng2-electron-builder 2 month ago. Its use a folked angular-cli with target parameter in angular-cli.json

[albkn]

I recently stumbled upon this problem myself, electron renderers written using angular-cli does not work with native Node.js modules such as fs.

A temporary hack that works for me is to have another JS file responsible to attaching your external modules to the renderer's global window object:

window.fs = require('fs');
window.electron = require('electron');

Once you have included that JS file in the app[0].scripts list in .angular-cli.json, window.fs and window.electron will be available throughout your renderer processes without getting destroyed by the CLI.

[Litarvan]

After using the @morcerf solution, i also needed, to pass compilation, to put in my typings.d.ts :

/// <reference path="../node_modules/electron/electron.d.ts"/>
declare var electron: Electron.AllElectron;

[chriseugenerodriguez]

@morcerf can you be more clear with your solution? Like where to add it with syntax to angular-cli.json?

[Litarvan]

@premiumwd For me, creating a modules.js file with morcerf's code, and adding it at the top of my scripts of my index.html, worked.

[albkn]

@premiumwd yep of course, hope this can be more helpful.

For example, your project needs the fs and os node packages which has some native code.

You will need to create a file (for example it is named native.js, but name can be anything):

// Content of native.js
window.fs = require('fs');
window.os = require('os');

Once you that file, you can add this part into your .angular-cli.json:

{
    "$schema": ...,

    "project": ...,

    "apps": [
        "root": ...,

        "scripts": [ "./native.js" ],   // <- The important part, include your file as a global dependency

        ....
    ],

    ...
}

alternatively you can also do a <script>require('./native.js')</script> in your HTML file as @Litarvan has suggested, that should work too.

Once you have done 1 of these approaches, window['fs'] and window['os'] will be available as a global object throughout your renderer's JS.

Note that I haven't migrated my electron code to Typescript. So if you use Typescript, you might have to do some type declaration to make it happy as @Litarvan also suggested above.

[dolanmiu]

I have created a plugin/extention for @angular/cli, which enables building electron apps on an angular cli project with a simple nge build command!

https://github.com/dolanmiu/ng-cli-electron

[giiyms]

Adding these to your polyfills.ts will stop the typescript compiler from complaining

declare global {
  interface Window {
    fs: any;
    os: any;
  }
}

[dolanmiu]

@GuyMS https://media.giphy.com/media/26uf2JHNV0Tq3ugkE/giphy-facebook_s.jpg

😂