We Keep Coding

Angular 8 components

What would be the most optimal structure for a business project with many components, (50 approx)?
That each component has its own module?
src/
├── app
│ ├── app.component.html
│ ├── app.component.scss
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── app-routing.module.ts
│ ├── components
│ │ ├── comp1
│ │ │ ├── comp1.component.ts
│ │ │ ├── comp1.module.ts
│ │ │ └── index.ts
│ │ ├── comp2
│ │ │ ├── comp2.component.ts
│ │ │ ├── comp2.module.ts
│ │ │ └── index.ts
│ │ ├── comp3
│ │ │ ├── comp3.component.ts
│ │ │ ├── comp3.service.ts
│ │ │ ├── comp3.module.ts
│ │ │ └── index.ts
│ ├── views
│ │ ├── admin
│ │ │ ├── admin.module.ts
│ │ │ ├── admin-routing.module.ts
│ │ │ ├── page1 <== Here I show comp1
│ │ │ ├── page2 <== Here I show comp2
│ │ │ ├── page3 <== Here I show comp3
That a module groups all the components? in this case, every time you load the module, will it load all the components in this memory?
src/
├── app
│ ├── app.component.html
│ ├── app.component.scss
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── app-routing.module.ts
│ ├── components
│ │ ├── comp1
│ │ │ ├── comp1.component.ts
│ │ ├── comp2
│ │ │ ├── comp2.component.ts
│ │ ├── comp3
│ │ │ ├── comp3.component.ts
│ │ │ ├── comp3.service.ts
│ │ ├── comps.module.ts <=== // group all components in one module
│ │ ├── index.ts
│ ├── views
│ │ ├── admin
│ │ │ ├── admin.module.ts
│ │ │ ├── admin-routing.module.ts
│ │ │ ├── page1 <== Here I show comp1
│ │ │ ├── page2 <== Here I show comp2
│ │ │ ├── page3 <== Here I show comp3
Any suggestion?

Yes, In angular when you load a module, all of its components are loaded.
You can create feature modules for you different functionalities which you dont want to load at start up. (That is done by lazy loading.)
So the structure will be kind of like this
Core module -> All components required at start up
Featured Modules -> Will load on demand later on.
In angular9, they have provided the feature to lazy load componenets as well. Now you can lazy load components even if the module is loaded.
https://johnpapa.net/angular-9-lazy-loading-components/

There is no strict rule. It depends on the components.
Usually it is a mix. A component that represents a "page" (e.g. the top level routes like your admin area) makes a good module. For "smaller" components used only from a single page it makes sense to put them into the same module.
Other components that are used multiple times from different "page" modules should get into their own module.
The size of the components is also a consideration. The larger a module gets the more it may be good to extract smaller modules.

Angular 4 + Redux (or ngrx/store) folder and file structure

Ref to Angular official site's style guile of file structure:
https://angular.io/docs/ts/latest/guide/style-guide.html#!#04-06
If I would like to implement Redux (or ngrx/store) to my new Angular 4 project, would it be better to structure my application in this way?
project root
├── src/
│ ├── app/
│ │ ├──stores/
│ │ │ ├── heros/
│ │ │ │ ├── heros.actions.ts|reducer|effects|store.ts
│ │ │ │
│ │ │ │── ..../
│ │ │ │ ├── .....
│ │ │
│ │ ├── containers/
│ │ │ ├── heros/
│ │ │ │ ├── heros.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │
│ │ │
│ │ ├── components/
│ │ │ ├── hero-list/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── .......
│ │ │ ├── ....
I have been using second structure but as my app grows, it was getting difficult to maintain, and then I refactored the structure in this way, the plus point of this structure is, if in future you decide to remove or edit ngrx all you need to do is remove or edit the stores folder.
Note:
- containers folder hold my smart components
- components folder hold my dumb components
Or follow ngrx/store's example (https://github.com/ngrx/example-app), to structure the application in this way?
project root
├── src/
│ ├── app/
│ │ ├── actions/
│ │ │ ├── hero.js
│ │ │ ├── hero-list.js
│ │ │ └── ......
│ │ ├── reducers/
│ │ │ ├── hero.js
│ │ │ ├── hero-list.js
│ │ │ └── ......
│ │ ├── components/
│ │ │ ├── heros/
│ │ │ │ ├── hero/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │ │ ├── hero-list/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │ ├── ......
Is there any other better structure?

project root
├── src/
│ ├── app/
│ │ ├──stores/
│ │ │ ├── heros/
│ │ │ │ ├── heros.actions.ts|reducer|effects|store.ts
│ │ │ │
│ │ │ │── ..../
│ │ │ │ ├── .....
│ │ │
│ │ ├── containers/
│ │ │ ├── heros/
│ │ │ │ ├── heros.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │
│ │ │
│ │ ├── components/
│ │ │ ├── hero-list/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── .......
│ │ │ ├── ....
I have been using second structure but as my app grows, it was getting difficult to maintain, and then I refactored the structure in this way, the plus point of this structure is, if in future you decide to remove or edit ngrx all you need to do is remove or edit the stores folder.
Note:
containers folder hold my smart components
components folder hold my dumb components

Harp is not serving js files from public directory

I am trying to compile my app on harp js. here is my directory structure.
.
├── 404.html
├── _harp
│ ├── 404.jade
│ ├── _data.json
│ ├── _harp.json
│ ├── _layout.jade
│ ├── index.jade
│ ├── main.less
│ └── public
│ ├── css
│ │ ├── bootstrap.css
│ │ ├── font-awesome.min.css
│ │ ├── hoverex-all.css
│ │ ├── prettyPhoto.css
│ │ └── style.css
│ └── js
│ ├── bootstrap.min.js
│ ├── custom.js
│ ├── jquery.hoverdir.js
│ ├── jquery.hoverex.min.js
│ ├── jquery.isotope.min.js
│ ├── jquery.prettyPhoto.js
│ ├── modernizr.min.js
│ └── retina-1.1.0.js
├── index.html
├── main.css
└── public
├── css
│ ├── bootstrap.css
│ ├── font-awesome.min.css
│ ├── hoverex-all.css
│ ├── prettyPhoto.css
│ └── style.css
└── js
now when i try to compile the app using
harp compile _harp ./
It is not compiling the js in the js directory. as you can see in the directory tree. the js directory is always blank. I have checked the permission it seems everything what I am missing?

TypeError: Cannot read property 'firstChild' of undefined While rendering the react page server side

I have used these npm dependencies while rendering the react using node on server side.
var React = require('react');
var ReactDOMServer = require('react-dom/server');
var request = require('request');
I can not use componentDidMount because it is never called while rendering server side. So, I used componentWillMount and my final code structure is like this :
var Content = React.createClass({
displayName: 'Content',
getInitialState: function getInitialState() {
console.log('getInitialState');
return {
xyz : [],
abc : ''
};
},
componentWillMount: function componentWillMount() {
console.log('componentWillMount');
request(
'some_url',
function (error, response, body) {
console.log(response.statusCode);
if (!error && response.statusCode == 200) {
console.log('Request Call');
this.setState = {
xyz : [],
abc : ''
}
}
}.bind(this));
},
render: function render() {
console.log('render');
return React.createElement(
'div',
{
className: 'clearfix container-fluid padding-none' },
React.createElement(TopSection, { title: this.state.title, slug: this.state.slug })
);
}
});
My LifeCycle is going as follow
getInitialState
componentWillMount
render
Request Call
render
and after the render is called second time i got this error
Warning: React can't find the root component node for data-reactid
value `.1va42hea328.1.0.1`. If you're seeing this message, it
probably means that you've loaded two copies of React on the page. At this
time, only a single copy of React can be loaded at a time.
/Users/me/Desktop/Projects/silly-poke/node_modules/react/lib/ReactMount.js:715
firstChildren[0] = deepestAncestor.firstChild;
^
TypeError: Cannot read property 'firstChild' of undefined
Output of npm ls is as below :
├─┬ compression#1.6.2
│ ├─┬ accepts#1.3.3
│ │ ├─┬ mime-types#2.1.11
│ │ │ └── mime-db#1.23.0
│ │ └── negotiator#0.6.1
│ ├── bytes#2.3.0
│ ├─┬ compressible#2.0.8
│ │ └── mime-db#1.23.0
│ ├─┬ debug#2.2.0
│ │ └── ms#0.7.1
│ ├── on-headers#1.0.1
│ └── vary#1.1.0
├─┬ express#4.14.0
│ ├─┬ accepts#1.3.3
│ │ ├─┬ mime-types#2.1.11
│ │ │ └── mime-db#1.23.0
│ │ └── negotiator#0.6.1
│ ├── array-flatten#1.1.1
│ ├── content-disposition#0.5.1
│ ├── content-type#1.0.2
│ ├── cookie#0.3.1
│ ├── cookie-signature#1.0.6
│ ├─┬ debug#2.2.0
│ │ └── ms#0.7.1
│ ├── depd#1.1.0
│ ├── encodeurl#1.0.1
│ ├── escape-html#1.0.3
│ ├── etag#1.7.0
│ ├─┬ finalhandler#0.5.0
│ │ ├── statuses#1.3.0
│ │ └── unpipe#1.0.0
│ ├── fresh#0.3.0
│ ├── merge-descriptors#1.0.1
│ ├── methods#1.1.2
│ ├─┬ on-finished#2.3.0
│ │ └── ee-first#1.1.1
│ ├── parseurl#1.3.1
│ ├── path-to-regexp#0.1.7
│ ├─┬ proxy-addr#1.1.2
│ │ ├── forwarded#0.1.0
│ │ └── ipaddr.js#1.1.1
│ ├── qs#6.2.0
│ ├── range-parser#1.2.0
│ ├─┬ send#0.14.1
│ │ ├── destroy#1.0.4
│ │ ├─┬ http-errors#1.5.0
│ │ │ ├── inherits#2.0.1
│ │ │ └── setprototypeof#1.0.1
│ │ ├── mime#1.3.4
│ │ ├── ms#0.7.1
│ │ └── statuses#1.3.0
│ ├── serve-static#1.11.1
│ ├─┬ type-is#1.6.13
│ │ ├── media-typer#0.3.0
│ │ └─┬ mime-types#2.1.11
│ │ └── mime-db#1.23.0
│ ├── utils-merge#1.0.0
│ └── vary#1.1.0
├── parent-require#1.0.0
├─┬ react#0.14.8
│ ├─┬ envify#3.4.1
│ │ ├─┬ jstransform#11.0.3
│ │ │ ├── base62#1.1.1
│ │ │ ├─┬ commoner#0.10.4
│ │ │ │ ├─┬ commander#2.9.0
│ │ │ │ │ └── graceful-readlink#1.0.1
│ │ │ │ ├─┬ detective#4.3.1
│ │ │ │ │ ├── acorn#1.2.2
│ │ │ │ │ └── defined#1.0.0
│ │ │ │ ├─┬ glob#5.0.15
│ │ │ │ │ ├─┬ inflight#1.0.5
│ │ │ │ │ │ └── wrappy#1.0.2
│ │ │ │ │ ├── inherits#2.0.1
│ │ │ │ │ ├─┬ minimatch#3.0.2
│ │ │ │ │ │ └─┬ brace-expansion#1.1.5
│ │ │ │ │ │ ├── balanced-match#0.4.1
│ │ │ │ │ │ └── concat-map#0.0.1
│ │ │ │ │ ├─┬ once#1.3.3
│ │ │ │ │ │ └── wrappy#1.0.2
│ │ │ │ │ └── path-is-absolute#1.0.0
│ │ │ │ ├── graceful-fs#4.1.4
│ │ │ │ ├── iconv-lite#0.4.13
│ │ │ │ ├─┬ mkdirp#0.5.1
│ │ │ │ │ └── minimist#0.0.8
│ │ │ │ ├── private#0.1.6
│ │ │ │ ├── q#1.4.1
│ │ │ │ └─┬ recast#0.10.43
│ │ │ │ ├── ast-types#0.8.15
│ │ │ │ ├── esprima-fb#15001.1001.0-dev-harmony-fb
│ │ │ │ └── source-map#0.5.6
│ │ │ ├── esprima-fb#15001.1.0-dev-harmony-fb
│ │ │ ├── object-assign#2.1.1
│ │ │ └─┬ source-map#0.4.4
│ │ │ └── amdefine#1.0.0
│ │ └── through#2.3.8
│ └─┬ fbjs#0.6.1
│ ├── core-js#1.2.6
│ ├─┬ loose-envify#1.2.0
│ │ └── js-tokens#1.0.3
│ ├─┬ promise#7.1.1
│ │ └── asap#2.0.4
│ ├── ua-parser-js#0.7.10
│ └── whatwg-fetch#0.9.0
├── react-dom#0.14.8
└─┬ request#2.72.0
├── aws-sign2#0.6.0
├── aws4#1.4.1
├─┬ bl#1.1.2
│ └─┬ readable-stream#2.0.6
│ ├── core-util-is#1.0.2
│ ├── inherits#2.0.1
│ ├── isarray#1.0.0
│ ├── process-nextick-args#1.0.7
│ ├── string_decoder#0.10.31
│ └── util-deprecate#1.0.2
├── caseless#0.11.0
├─┬ combined-stream#1.0.5
│ └── delayed-stream#1.0.0
├── extend#3.0.0
├── forever-agent#0.6.1
├─┬ form-data#1.0.0-rc4
│ └── async#1.5.2
├─┬ har-validator#2.0.6
│ ├─┬ chalk#1.1.3
│ │ ├── ansi-styles#2.2.1
│ │ ├── escape-string-regexp#1.0.5
│ │ ├─┬ has-ansi#2.0.0
│ │ │ └── ansi-regex#2.0.0
│ │ ├─┬ strip-ansi#3.0.1
│ │ │ └── ansi-regex#2.0.0
│ │ └── supports-color#2.0.0
│ ├─┬ commander#2.9.0
│ │ └── graceful-readlink#1.0.1
│ ├─┬ is-my-json-valid#2.13.1
│ │ ├── generate-function#2.0.0
│ │ ├─┬ generate-object-property#1.2.0
│ │ │ └── is-property#1.0.2
│ │ ├── jsonpointer#2.0.0
│ │ └── xtend#4.0.1
│ └─┬ pinkie-promise#2.0.1
│ └── pinkie#2.0.4
├─┬ hawk#3.1.3
│ ├── boom#2.10.1
│ ├── cryptiles#2.0.5
│ ├── hoek#2.16.3
│ └── sntp#1.0.9
├─┬ http-signature#1.1.1
│ ├── assert-plus#0.2.0
│ ├─┬ jsprim#1.3.0
│ │ ├── extsprintf#1.0.2
│ │ ├── json-schema#0.2.2
│ │ └── verror#1.3.6
│ └─┬ sshpk#1.8.3
│ ├── asn1#0.2.3
│ ├── assert-plus#1.0.0
│ ├── dashdash#1.14.0
│ ├── ecc-jsbn#0.1.1
│ ├── getpass#0.1.6
│ ├── jodid25519#1.0.2
│ ├── jsbn#0.1.0
│ └── tweetnacl#0.13.3
├── is-typedarray#1.0.0
├── isstream#0.1.2
├── json-stringify-safe#5.0.1
├─┬ mime-types#2.1.11
│ └── mime-db#1.23.0
├── node-uuid#1.4.7
├── oauth-sign#0.8.2
├── qs#6.1.0
├── stringstream#0.0.5
├── tough-cookie#2.2.2
└── tunnel-agent#0.4.3
means there is no other version of react loading as i have seen problem on searching this error.

Your problem is you are making a request inside componentWillMount. componentWillMount is called even for server side rendering so when this request comes back it'll try to setState on a component that doesn't exist (since server side rendering uses renderToString).
Move the request to componentDidMount so it only gets called on the client.
Additionally, if you'd still like to fetch data before rendering on the server then use something like redux-async-connect.

Electron error on canceling file open dialog

When I press the cancel button on file open dialog (code below) I receive the following error:
A JavaScript error occurred in the main process
Uncaught Exception:
TypeError: Error processing argument -1.
at TypeError (native)
at [object Object].Object.defineProperty.set (/Applications/Electron.app/Contents/Resources/atom.asar/browser/api/lib/web-contents.js:92:24)
at main.js:37:20
at Function.wrappedCallback (/Applications/Electron.app/Contents/Resources/atom.asar/browser/api/lib/dialog.js:80:16)
The error is presented as a modal popup:
I have only tested on a Mac so far.
My code is as follows:
The main process code that handles the creation of dialog is as follows:
import electron, { ipcMain } from 'electron'
const app = electron.app
const BrowserWindow = electron.BrowserWindow
electron.crashReporter.start()
let mainWindow = null
app.on('window-all-closed', () => {
if (process.platform != 'darwin') app.quit()
})
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600
})
mainWindow.loadURL(`file://${__dirname}/index.html`)
mainWindow.webContents.openDevTools()
mainWindow.on('closed', () => {
mainWindow = null
})
ipcMain.on('file:open', (e, arg) => {
electron.dialog.showOpenDialog(mainWindow, {
properties: ['openFile'],
filters: [{
name: 'Outlines',
extensions: ['pxo']
}]
}, (filePathList) => {
debugger
e.returnValue = filePathList
})
})
})
My debugger statement is never reached. Also the code works fine when some files are actually selected, and only fails if cancel is pressed.
The code (ES6+JSX) that triggers the IPC call is as follows:
class Welcome extends React.Component {
render() {
const styles = this.getStyles()
return (
<div style={styles.outerContainer}>
<a style={styles.btnSetLink} onClick={this.initFileSelection.bind(this)}>
Open File
</a>
</div>
)
}
initFileSelection() {
const filePathList = ipcRenderer.sendSync('file:open')
}
...
The code is processed through babel 6. My .babelrc is as follows:
{
"presets": ["react", "es2015"]
}
Version of electron: v0.35.1.
Versions of babel dependencies:
├─┬ babel-preset-es2015#6.3.13
│ ├── babel-plugin-check-es2015-constants#6.3.13
│ ├── babel-plugin-transform-es2015-arrow-functions#6.3.13
│ ├── babel-plugin-transform-es2015-block-scoped-functions#6.3.13
│ ├─┬ babel-plugin-transform-es2015-block-scoping#6.3.13
│ │ ├─┬ babel-template#6.3.13
│ │ │ └── babylon#6.3.18
│ │ ├─┬ babel-traverse#6.3.19
│ │ │ ├── babylon#6.3.18
│ │ │ ├── globals#8.15.0
│ │ │ └─┬ repeating#1.1.3
│ │ │ └─┬ is-finite#1.0.1
│ │ │ └── number-is-nan#1.0.0
│ │ └─┬ babel-types#6.3.18
│ │ ├── esutils#2.0.2
│ │ └── to-fast-properties#1.0.1
│ ├─┬ babel-plugin-transform-es2015-classes#6.3.15
│ │ ├── babel-helper-define-map#6.3.13
│ │ ├── babel-helper-function-name#6.3.15
│ │ ├── babel-helper-optimise-call-expression#6.3.13
│ │ ├── babel-helper-replace-supers#6.3.13
│ │ └── babel-messages#6.3.18
│ ├── babel-plugin-transform-es2015-computed-properties#6.3.13
│ ├── babel-plugin-transform-es2015-destructuring#6.3.15
│ ├── babel-plugin-transform-es2015-for-of#6.3.13
│ ├── babel-plugin-transform-es2015-function-name#6.3.19
│ ├── babel-plugin-transform-es2015-literals#6.3.13
│ ├─┬ babel-plugin-transform-es2015-modules-commonjs#6.3.16
│ │ └── babel-plugin-transform-strict-mode#6.3.13
│ ├── babel-plugin-transform-es2015-object-super#6.3.13
│ ├─┬ babel-plugin-transform-es2015-parameters#6.3.18
│ │ ├─┬ babel-helper-call-delegate#6.3.13
│ │ │ └── babel-helper-hoist-variables#6.3.13
│ │ └── babel-helper-get-function-arity#6.3.13
│ ├── babel-plugin-transform-es2015-shorthand-properties#6.3.13
│ ├── babel-plugin-transform-es2015-spread#6.3.14
│ ├─┬ babel-plugin-transform-es2015-sticky-regex#6.3.13
│ │ └── babel-helper-regex#6.3.13
│ ├── babel-plugin-transform-es2015-template-literals#6.3.13
│ ├── babel-plugin-transform-es2015-typeof-symbol#6.3.13
│ ├─┬ babel-plugin-transform-es2015-unicode-regex#6.3.13
│ │ └─┬ regexpu#1.3.0
│ │ ├── esprima#2.7.1
│ │ ├─┬ recast#0.10.33
│ │ │ ├── ast-types#0.8.12
│ │ │ └── esprima-fb#15001.1001.0-dev-harmony-fb
│ │ ├── regenerate#1.2.1
│ │ ├── regjsgen#0.2.0
│ │ └─┬ regjsparser#0.1.5
│ │ └── jsesc#0.5.0
│ └─┬ babel-plugin-transform-regenerator#6.3.18
│ ├── babel-core#6.3.17
│ ├── babel-plugin-syntax-async-functions#6.3.13
│ ├── babylon#6.3.18
│ └── private#0.1.6
├─┬ babel-preset-react#6.3.13
│ ├── babel-plugin-syntax-flow#6.3.13
│ ├── babel-plugin-syntax-jsx#6.3.13
│ ├── babel-plugin-transform-flow-strip-types#6.3.15
│ ├── babel-plugin-transform-react-display-name#6.3.13
│ ├─┬ babel-plugin-transform-react-jsx#6.3.13
│ │ └── babel-helper-builder-react-jsx#6.3.13
│ └── babel-plugin-transform-react-jsx-source#6.3.13
├─┬ babel-register#6.3.13
│ ├─┬ babel-core#6.3.17
│ │ ├─┬ babel-code-frame#6.3.13
│ │ │ ├─┬ chalk#1.1.1
│ │ │ │ ├── ansi-styles#2.1.0
│ │ │ │ ├── escape-string-regexp#1.0.3
│ │ │ │ ├─┬ has-ansi#2.0.0
│ │ │ │ │ └── ansi-regex#2.0.0
│ │ │ │ ├── strip-ansi#3.0.0
│ │ │ │ └── supports-color#2.0.0
│ │ │ ├── js-tokens#1.0.1
│ │ │ └─┬ line-numbers#0.2.0
│ │ │ └── left-pad#0.0.3
│ │ ├─┬ babel-generator#6.3.19
│ │ │ ├─┬ detect-indent#3.0.1
│ │ │ │ ├── get-stdin#4.0.1
│ │ │ │ └── minimist#1.2.0
│ │ │ ├── is-integer#1.0.6
│ │ │ └── trim-right#1.0.1
│ │ ├── babel-helpers#6.3.13
│ │ ├── babylon#6.3.18
│ │ ├── convert-source-map#1.1.2
│ │ ├─┬ debug#2.2.0
│ │ │ └── ms#0.7.1
│ │ ├── json5#0.4.0
│ │ ├─┬ minimatch#2.0.10
│ │ │ └─┬ brace-expansion#1.1.2
│ │ │ ├── balanced-match#0.3.0
│ │ │ └── concat-map#0.0.1
│ │ ├── path-is-absolute#1.0.0
│ │ ├── shebang-regex#1.0.0
│ │ ├── slash#1.0.0
│ │ └── source-map#0.5.3
│ ├── babel-runtime#5.8.34
│ ├── core-js#1.2.6
│ ├─┬ home-or-tmp#1.0.0
│ │ ├── os-tmpdir#1.0.1
│ │ └── user-home#1.1.1
│ ├── lodash#3.10.1
│ ├── path-exists#1.0.0
│ └─┬ source-map-support#0.2.10
│ └─┬ source-map#0.1.32
│ └── amdefine#1.0.0
Any help resolving the error would be highly appreciated.

Same problem here, I solved it by coercing return value to false (it is undefined otherwise):
ipc.on 'request:save:dialog', (event, params) ->
params||={}
event.returnValue = dialog.showSaveDialog(params) || false

i use this to handle it
process.on('uncaughtException', function (exception) {
// handle or ignore error
});

For my case, I din't have any javascript error on the UI nor in the console. The app would just quit like you just closed it normally after cancelling the file open dialog. This was happening when I was using electron version 5. Updating to version 8 resolved this issue.